BS要结了，抽出空来拿CSS+DIV练练手，用了理解的会更深刻，这次做的是个旅游网站的界面（例子源于《精通CSS.DIV网页设计与布局》）。
html代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link style="text/css" rel="stylesheet" href="css/journeyWeb.css"/>
</head>
<body><div id="container"><div id="header"><img src="image/banner.jpg" alt="图片加载中"/> </div><div id="globalLink"><ul><li><a href=www.baidu.com">首页</a></li><li><a href="#">新疆简介</a></li><li><a href="#">风土人情</a></li><li><a href="#">吃在新疆</a></li><li><a href="#">路线选择</a></li><li><a href="#">自助行</a></li><li><a href="#">摄影摄像</a></li><li><a href="#">游记精选</a></li><li><a href="#">资源下载</a></li> <li><a href="#">雁过留声</a></li></ul></div><div id="left"><div id="weather"><h3><span>天气查询</sapn></h3><ul><li>乌鲁木齐 雷阵雨20℃-31℃</li><li>吐鲁番 多云转阴20℃-28℃</li><li>柴达木 雷阵雨转多云18℃-25℃</li><li>库尔勒 雷阵雨20℃-31℃</li><li>克拉玛依 雷阵雨20℃-31℃</li></ul></div><div id="today"><h3><span>今日推荐</span></h3><ul><li><a href="#"><img src="image/tuijian1.jpg" ></a></li><li class="sceneryname"><a href="#">克纳斯河</a></li><li><a href="#"><img src="image/tuijian2.jpg" ></a></li><li class="sceneryname"><a href="#">布尔津</a></li><li><a href="#"><img src="image/tuijian3.jpg" ></a></li><li class="sceneryname"><a href="#">天山之路</a></li></ul></div></div><div id="middle"><div id="ghost"><img src="image/ghost.jpg" alt="图片加载中"/></div><div id="beauty"><h3><img src="image/picture_h1.gif"/></h3><ul><li><a href="#"><img src="image/beauty1.jpg" /></a></li><li><a href="#"><img src="image/beauty2.jpg" /></a></li><li><a href="#"><img src="image/beauty3.jpg" /></a></li><li><a href="#"><img src="image/beauty4.jpg" /></a></li></ul><br /></div><div id="route"><h3><img src="image/route_h1.gif"/></h3><ul><li><a href="#">吐鲁番-——库尔勒———塔钟</a></li><li><a href="#">乌鲁木齐-——库尔勒———天池</a></li><li><a href="#">五彩池-——将军隔壁———那拉提</a></li><li><a href="#">齐尔马-——库尔勒———塔钟</a></li></ul></div></div><div id="right"><div id="map"><h3>新疆风光</h3><div><a href="#"><img src="image/map1.jpg" alt="数据加载中"/></a></div><div><a href="#"><img src="image/map2.jpg" alt="数据加载中"/></a></div></div><div id="food"><h3>小吃推荐</h3><ul><li><a href="#">17号抓饭</a></li><li><a href="#">大盘鸡</a></li><li><a href="#">五一夜市</a></li><li><a href="#">水果</a></li></ul></div><div id="lift"><h3>宾馆酒店</h3><ul><li><a href="#">美丽华大酒店</a></li><li><a href="#">海德大酒店</a></li><li><a href="#">银都大酒店</a></li><li><a href="#">鸿福大酒店</a></li><li><a href="#">友好大酒店</a></li><li><a href="#">棉麻大酒店</a></li><li><a href="#">电信大酒店</a></li></ul></div></div><div id="footer"><p>清风 © 版权所有<a href="mailto:350676076@qq.com">350676076@qq.com</a></p></div></div>
</body>
</html>
CSS代码：
html{margin:0px;padding:0px;width:780px;margin:0 auto;font-size:12px;background-color:#2286C6;
}
body{margin:0px;padding:0px;
}
#header{width:780px;/*background-color:blue;*/
}#globalLink{width:780px;
}
#globalLink a{display:block;padding:5px;background-image:url("../image/button1.jpg");background-repeat:no-repeat;/*记得行内元素设置长度和宽度不好使，a标签不属于行内元素吗？*/
}
#globalLink ul{list-style:none;margin:0px;padding:0px;
}
#globalLink ul li{float:left;width:78px;text-align:center;
}#globalLink a:link ,#globalLink a:visited{color:#004ab7;text-decoration:underline;
}#globalLink a:hover{color:#ffffff;text-decoration:underline;background-image:url("../image/button1_bg.jpg");
}
#globalLink a:active{color:black;
}
#left{float:left;width:200px;background-color:#ffffff;margin:0px;padding:0px 0px 5px 0px;color:#d8ecff;
}#weather{background:url(../image/weather.jpg)no-repeat -5px 0px;background-color:#53a6eb;margin:0px 5px;
}#weather h3{font-size:12px;padding:24px 0px 0px 74px;color:#ffffff;background:none;margin:0px;
}#weather ul{list-style:none;margin:8px 5px 0px 5px;padding:10px 0px 8px 5px;
}#weather ul li{background:url(../image/icon1.gif) no-repeat 0px 6px;padding:1px 0px 0px 10px;
}
#today{background-color:#5EA6EB;margin:5px;margin-top:0px;
}
#today h3{margin:0px;padding-left:20px;background-color:#BBDDFF;background-image:url("../image/icon2.gif");background-repeat:no-repeat;background-position:10px 50%;color:#004AB7;}
#today ul{list-style:none;margin:0px;padding:8px;}
#today ul li{text-align:center;
}#today.sceneryname{padding-bottom:6px;
}#today a:link ,#today a:visited{color:#D8ECFF;text-decoration:underline;
}#today a:hover{color:#ffffff;text-decoration:underline;
}
#today a:active{color:black;
}#middle{background-color:#ffffff;margin:0px 0px 0px 2px;padding:0px;padding-left:5px;width:400px;float:left;
}#middle #ghost img{margin-top:6px;margin-left:3px;}#beauty h3{margin:4px 0px;
}
#beauty ul{list-style:none;margin:0px;padding:0px;padding:5px;
}
#beauty ul li{float:left;margin-right:9px;margin-bottom:5px;border:1px solid blue;height:123px;
}
#route h3{margin:4px 0px;
}#route ul{list-style:none;padding:0px;margin:0px;padding:15px;
}
#route ul li{padding:1px 0px;
}
#route a:link ,#route a:visited{color:#004ab7;text-decoration:underline;
}#route a:hover{color:#000000;text-decoration:underline;
}
#route a:active{color:black;
}#right{float:left;margin:0px 0px 1px 2px;width:171px;background-color:#5EA6EB;color:#d8ecff;
}#right h3{color:#004AB7;margin:0px;background-color:#BBDDFF;padding:8px;padding-left:18px;background-image:url("../image/icon2.gif");background-repeat:no-repeat;background-position:7px center;}
#right #map a{margin:0px;
}#right #map a img{margin:5px 10px;
}
#right a:link ,#right a:visited{color:#D8ECFF;text-decoration:underline;
}#right a:hover{color:#ffffff;text-decoration:underline;
}
#right a:active{color:black;
}#food ul,#lift ul{list-style:none;padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;
}#food ul li,#lift ul li{background-image:url("../image/icon1.gif");background-repeat:no-repeat;background-position:3px 9px;padding:3px 0px 3px 12px;border-bottom:1px dashed #EEEEEE;}
#food a:link ,#food a:visited{color:#004ab7;text-decoration:underline;
}#food a:hover{color:#000000;text-decoration:underline;
}
#food a:active{color:black;
}#lift a:link ,#lift a:visited{color:#004ab7;text-decoration:underline;
}#lift a:hover{color:#000000;text-decoration:underline;
}
#lift a:active{color:black;
}#footer{background-color:#ffffff;margin:1px 0px;clear:both;position:relative;padding:1px 0px;}#footer p{text-align:center;padding:0px;margin:4px 5px;background-color:#5ea6eb;}#footer p a{color:#ffffff;text-decoration:none;}
这段时间试着总结自己的“代码大全”，把不理解的和经典的代码段整理出来，积累久了肯定的、能大大的提高工作效率，有写常用的东西还可以封装起来，用的时候拿过来用就好了（比如像SQLHelper一类的）。
![交互设计[小插曲]--网站UI配色](https://img-blog.csdn.net/20140112154838859?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueWluZ3l1YW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
