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