日期:2014-05-17 浏览次数:20643 次
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>&l