*风光 页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("ul.css");
</style>
</head>
<body>
<div id="z">
<div align="center">
<img src="img/images/banner.jpg"/>
</div>
<div id="a">
<ul>
<li id="o"><a href="#">首页</a></li>
<li id="o" ><a href="#">*简介 </a></li>
<li id="o" ><a href="#">风土人情</a></li>
<li id="o" ><a href="#">吃在*</a></li>
<li id="o" ><a href="#">路线选择</a></li>
<li id="o"><a href="#">自助行</a></li>
<li id="o"><a href="#">摄影摄像</a></li>
<li id="o" ><a href="#">游记精选</a></li>
<li id="o" ><a href="#">资源下载</a></li>
</ul>
</div>
<div id="xb" align="center">
<div id="xx" >
<div id="xx1" >
<img src="img/images/weather22.jpg" />
</div>
<div id="xx2" >
<ul >
<li>乌鲁木齐 雷阵雨20℃-30℃</li>
<li>吐鲁番 雷阵雨20℃-28℃</li>
<li>喀什 雷阵雨25℃-32℃</li>
<li>库尔勒 雷阵雨20℃-30℃</li>
<li>克拉玛依 雷阵雨20℃-30℃</li>
</ul>
</div>
<div id="xx3">
<img src="img/images/icon2.gif" />今日推荐
</div>
<div id="xx4">
<div id="xx5" >
<img src="img/images/map1.jpg"/>
</div>
<div id="xx6">
喀纳斯河
</div>
<div id="xx5">
<img src="img/images/map2.jpg" />
</div>
<div id="xx6">
布尔津
</div>
<div id=xx7>
<img src="img/images/tuijian3.jpg" />
</div>
<div id="xx6">
天山之路
</div>
</div>
</div>
<div id="cc">
<div id="cc1">
<a href="##"title="*魔鬼域"><img src="img/images/ghost.jpg"/></a>
</div>
<div id="cc2">
<img src="img/images/picture_h1.gif"/>
</div>
<div id="cc3">
<div id="cc32">
<img src="img/images/beauty1.jpg" />
</div>
<div id="cc32">
<img src="img/images/beauty2.jpg" />
</div>
<div id="cc32">
<img src="img/images/beauty3.jpg" />
</div>
<div id=cc32>
<img src="img/images/beauty4.jpg" />
</div>
</div>
<div id="cc2">
<img src="img/images/route_h1.gif" />
</div>
<div id="cc4">
<ul>
<li>吐鲁番——库尔勒——库车——塔中——和田——喀什</li>
<li>乌鲁木齐——天池——克拉玛依——无论古湖——喀纳斯</li>
<li>乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</li>
<li>乌鲁木齐——库尔勒——库车——塔中——和田——喀什</li>
</ul>
</div>
</div>
<div id="vv">
<div id="vv1">
*风光
</div>
<div id="vv2">
<img src="img/images/map1.jpg"/><br />
<img src="img/images/map2.jpg" />
</div>
<div id="vv1">
<img src="img/images/icon2.gif" />小吃推荐
</div>
<div id="vv3">
<p><a href="#">17号抓</a></p>
<p><a href="#">大盘鸡</a></p>
<p><a href="#">五一夜市</a></p>
<p><a href="#">水果</a></p>
</div>
<div id="vv1">
<img src="img/images/icon2.gif" />宾馆酒店
</div>
<div id="vv3">
<p><a href="#">美丽华大酒店</a></p>
<p><a href="#">海德大酒店</a></p>
<p><a href="#">银都大酒店</a></p>
<p><a href="#">鸿富大酒店</a></p>
<p><a href="#">友好大酒店</a></p>
<p><a href="#">棉麻宾馆</a></p>
<p><a href="#">电信宾馆</a></p>
</div>
</div>
<div id="zui">
<div id="zui1" align="center" >艾萨克@版权所有demo@demo.com</div>
</div>
</div>
</div>
</body>
</html>
ul.css
*{margin:0 auto;
padding: 0;
}
#z{
width: 780px;
}
#a{
margin:auto;
display: table;
text-align: center;
background-image: url(img/images/button1.jpg);
}
#a li{
float: left;
list-style-type: none;
padding-right:8px;
}
#xb{margin-top: 0px;
height: 800px;
width: 780px;
}
#xx{ float: left;
margin-top: 0px;
width: 187px;
height: 580px;
}
#xx1{margin-left: 2px;
float: left;
height: 38px;
width: 184px;
}
#xx2{ float: left;
margin-top: 2px;
border-color: black;
font-size: 8px;
width: 185px;
height: 100px;
background-color: #5393d1;
}
#xx2 li{
list-style-image: url(img/images/icon1.gif);
}
#xx3{
float: left;
width: 185px;
height: 25px;
background-color: aquamarine;
}
#xx4{
float: left;
width: 185px;
height: 400px;
background-color: #5393D1;
}
#xx5{float: left;
width: 150px;
height: 100px;
margin-left: 13px;
}
#xx6{color: white;
float: left;
width: 184px;
height: 20px;
}
#xx7{ float: left;
width: 171;
height: 114;
margin-left: 9px;
}
#cc{float: left;
width: 406px;
height: 580px;
}
#cc1{
float:left ;
width: 390px;
height: 260px;
margin-left: 7px;
}
#cc2{
float:left;
width: 157px;
height: 41px;
margin-left: 0 auto;
margin-top: 10px;
}
#cc3{
float:left ;
width: 390px;
height:123px ;
margin-left: 4px;
margin-top:10px;
}
#cc32{
width: 82px;
height: 123px;
float: left;
margin-left: 13px;
}
#cc4{
margin-top:5px;
float: left;
width: 406px;
}
#cc4 li{
font-size:8px ;
}
#vv{
background-color: #5393D1;
float: left;
width: 166px;
height:571px;
}
#vv1
{ width: 165px;
float: left;
height: 25px;
}
#vv2{
float: left;
width: 163px;
background-color:darkcyan;
height:333 px;
}
#vv3{
float: left;
width: 165px;
height: 90px;
background-color:darkcyan;
}
#vv3 p{
color: white;
border-bottom: white 1px;
background-color:darkcyan;
}
#a a:hover{
background-image: url(img/images/button1_bg.jpg);
}
#a li{
width: 78px;
height: 33px;
float: left;
}
#o{
float: left;
width: 10%;
}
#vv3 a:hover{
color: blue;
}
#zui{float: left;
height: 30px;
width: 780px;
background-color:darkcyan;
}
#zui1{font-size: 8px;
float: left;
margin-left: 10px;
margin-top: 6px;
height: 15px;
width: 760px;
background-color: #0000FF;
}