素材下载(包含源码)
图一是给出欲完成的效果图:

图1
图2为自己完成的效果图:

图2
【源码】
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>渚?</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>例2</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="div0">
<div id="div1">
<img src="web/images/banner.jpg" />
</div>
<div id="div2">
<a href="#">首页</a>
<a href="#">新疆简介</a>
<a href="#">风土人情</a>
<a href="#">吃在新疆</a>
<a href="#">路线选择</a>
<a href="#">自助行</a>
<a href="#">摄影摄像</a>
<a href="#">游记精选</a>
<a href="#">资源下载</a>
<a href="#">雁过留声</a>
</div>
<div id="div3">
<div id="div4">
天气预报
</div>
<div id="div5">
<div id="div6">
<img src="web/images/icon1.gif" />
<span>乌鲁木齐 雷阵雨 20℃-31℃</span></div>
<div id="div6">
<img src="web/images/icon1.gif" />
<span>吐鲁番 多云转阴 20℃-28℃</span></div>
<div id="div6">
<img src="web/images/icon1.gif" />
<span>喀什 阵雨转多云 25℃-32℃</span></div>
<div id="div6">
<img src="web/images/icon1.gif" />
<span>库尔勒 阵雨转阴 21℃-28℃</span></div>
<div id="div6">
<img src="web/images/icon1.gif" />
<span>克拉马依 雷阵雨 26℃-30℃</span></div>
</div>
<div id="div7">
<div id="div8">
<img src="web/images/icon2.gif" />
<span>今日推荐</span>
</div>
<div id="div9">
<br />
<a href="#"><a href="#"><img src="web/images/tuijian1.jpg" /></a><br />
<a href="#">喀纳斯河</a>
<a href="#"><img src="web/images/tuijian2.jpg" /></a><br />
<a href="#">布尔津</a>
<a href="#"><img src="web/images/tuijian3.jpg" /></a><br />
<a href="#">天山之路</a>
</div>
</div>
</div>
<div id="div10">
<div id="div11"><a href="#"><img src="web/images/ghost.jpg" alt="魔鬼城探秘" /></a></div>
<div id="div12"><img src="web/images/picture_h1.gif" /></div>
<div id="div13">
<a href="#"><img src="web/images/beauty1.jpg" /></a>
<a href="#"><img src="web/images/beauty2.jpg" /></a>
<a href="#"><img src="web/images/beauty3.jpg" /></a>
<a href="#"><img src="web/images/beauty4.jpg" /></a>
</div>
<div id="div12"><img src="web/images/route_h1.gif" /></div>
<div id="div14">
<img src="web/images/icon1.gif" /><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a><br />
<img src="web/images/icon1.gif" /><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a><br />
<img src="web/images/icon1.gif" /><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a><br />
<img src="web/images/icon1.gif" /><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a><br />
</div>
</div>
<div id="div15">
<div id="div16">
<img src="web/images/icon2.gif" /><span>新疆风光</span>
</div>
<div id="div17">
<a href="#"><img src="web/images/tuijian1.jpg" alt="点击查看大图"/></a><br />
<a href="#"><img src="web/images/tuijian2.jpg" alt="点击查看大图"/></a>
</div>
<div id="div16">
<img src="web/images/icon2.gif" /><span>小吃推荐</span>
</div>
<div id="div17"> </div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">17号抓饭</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">大盘鸡</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">五一夜市</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">水果</a></div>
<div id="div17"> </div>
<div id="div16">
<img src="web/images/icon2.gif" /><span>宾馆酒店</span>
</div>
<div id="div17"> </div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">美丽华大饭店</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">海德大饭店</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">银都大饭店</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">鸿福大饭店</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">友好大酒店</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">棉麻宾馆</a></div>
<div id="div18"><img src="web/images/icon1.gif" /><a href="#">电信宾馆</a></div>
</div>
</div>
<div id="div19">
<div id="div20">艾萨克 版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></div>
</div>
</div>
</body>
</html>
css文件:
@charset "utf-8";
body{
width:auto;
margin:0 auto;
background-color:#06F;
}
#div0{
width:790px;
margin:0 auto;
background-color:#FFF;
}
#div1{
width:783px;
height:150px;
margin-bottom:-3px;
margin:0 auto;
}
#div2{
width:783px;
height:33px;
margin:0 auto;
margin-top:-4px;
text-align:center;
background-image:url(web/images/button1.jpg);
background-repeat:repeat-x;
border-bottom-style:solid;
border-bottom-color:#0CF;
border-bottom-width:2px;
}
#div2 a{
display:block;
width:78px;
height:33px;
float:left;
font-size:12px;
margin:0px auto;
line-height:30px;
}
#div2 a:link{
color:#06C;
}
#div2 a:visited{
color:#06C;
}
#div2 a:hover{
background-image:url(web/images/button1_bg.jpg);
background-color:#F00;
}
#div2 a:active{
color:#06C;
}
#div3{
width:200px;
margin:0px auto;
float:left;
padding:0px;
border-right-color:#09F;
border-right-style:solid;
border-right-width:3px;
}
#div3 #div4{
height:47px;
text-align:center;
background-image:url(web/images/weather.jpg);
line-height:47px;
font-size:14px;
color:#FFF;
}
#div3 #div5{
width:200px;
background-color:#03F;
text-align:center;
background-color:#FFF;
}
#div5 #div6{
width:190px;
text-align:center;
font-size:12px;
background-color:#09F;
}
#div3 #div7{
background-color:#FFF;
text-align:center;
}
#div7 #div8{
width:190px;
text-align:left;
font-size:12px;
color:#00F;
background-color:#06C;
}
#div7 #div9{
width:190px;
background-color:#09F;
text-align:center;
color:#FFF;
font-size:12px;
}
#div9 img{
border:1px #FFF solid;
}
#div9 a{
color:#FFF;
text-decoration:none;
}
#div9 a:hover{
color:#CF0;
text-decoration:underline;
}
#div10{
float:left;
width:400px;
margin:0 auto;
background-color:#FFF;
text-align:center;
}
#div10 #div11{
margin:5px auto;
width:390px;
}
#div11 a:visited{
border-style:none;
}
#div11 img{
border-style:none;
}
#div10 #div12{
text-align:left;
margin-left:0em;
}
#div13 a img{
margin-left:0.5em;
border:1px #0CF solid;
}
#div14 img{
margin-left:1em;
}
#div14{
font-size:12px;
text-align:left;
}
#div14 a{
margin-left:1em;
text-decoration:none;
color:#06F;
}
#div14 a:hover{
text-decoration:underline;
color:#000;
}
#div15{
float:left;
width:180px;
margin:0 auto;
border-left:3px #09F solid;
}
#div16{
color:#00F;
background-color:#099;
}
#div16 img{
margin-left:0.5em;
margin-right:0.5em;
}
#div16 span{
font-size:12px;
}
#div17{
background-color:#09F;
}
#div17 a img{
margin-top:0.2em;
margin-left:0.2em;
border:1px #FFF solid;
}
#div18{
background-color:#09F;
border-bottom:1px #0CF dashed;
}
#div18 img{
margin-left:1em;
}
#div18 a{
margin-left:1em;
text-decoration:none;
font-size:14px;
color:#fff;
}
#div18 a:hover{
text-decoration:none;
color:#000;
}
#div19{
width:790px;
height:20px;
background-color:#FFF;
margin:0 auto;
border-top:2px #09F solid;
}
#div19 #div20{
text-align:center;
font-size:12px;
background-color:#09F;
height:15px;
margin:5px 5px;
}
#div20 a{
color:#FFF;
text-decoration:none;
}
#div20 a:hover{
text-decoration:underline;
}