这个东西也花了本人一天的时间做的，兼容上有点小瑕疵，195行，请称呼本人195行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新疆行知书</title>
<!--<link rel="stylesheet" type="text/css" href="style.css"/>-->
<style type="text/css">
body{background-color:#2285c8}
body,hr,p,ul{margin:0;padding:0}
#container{margin:0 auto;width:780px}
#logo{height:150px;background-image:url("img/banner.jpg")}
#nav{height:33px;background-color:#0c6}
#nav ul{margin-top:0;margin-bottom:0;padding-left:0;list-style-type:none}
#nav ul li{float:left;padding-top:7px;width:78px;height:26px;background-image:url("img/button1.jpg");text-align:center;font-size:9pt}
#nav ul li:hover{background-image:url("img/button1_bg.jpg")}
#nav ul li a{text-decoration:none}
#left{width:200px;border-top:1px solid #fff}
#left,#middel{float:left;height:600px;background-color:#fff}
#middel{width:25pc;border:1px solid #1682ef}
#right{float:left;width:174px;height:600px;border:1px solid #fff;background-color:#bdf}
#weather{width:200px;height:145px;background-color:#fff}
#weather-h{margin:0;padding-top:17px;height:30px;border-bottom:1px solid #fff;background-image:url("img/weather.jpg");font-size:14px}
#weather-h span{padding-left:5pc;color:#fff}
#weather-b{padding:5px 0;width:200px;background-color:#5da7f0;color:#fff;font-size:9pt}
#weather-li{padding-left:20px;list-style-image:url("img/icon1.gif")}
#recommend{width:200px;height:25px;background-color:#bdf}
#recommend span{padding-top:2px;color:#09365f}
#recommend-t{text-align:left;font-weight:700;font-size:13px}
.icon{height:10px}
#recommend-img{background-color:#5da6eb;text-align:center}
.recommend-imgs{height:146px}
.recommend-imgs span{margin:0,auto;padding-top:10px;width:200px;color:#fff;font-size:13px}
.recommend-imgs img{margin-top:7px;border:1px solid;color:#fff}
#pic-mid{padding-top:5px;text-align:center}
.mid-img{padding-top:10px}
#beautiful-ul{padding-right:15px;padding-left:11px}
#beautiful-ul li{float:left;padding-left:10px;width:82px;list-style-type:none}
#beautiful-ul li img{border:1px solid #00f}
#line-ul ul{padding-top:5px;padding-left:46px;color:#244358;list-style-image:url("img/icon1.gif");font-size:9pt}
#line-ul ul li{color:#0d527c}
#footer{margin-top:5px;height:30px;text-align:center}
#footer p{border:solid #fff 3px;background-color:#5da6eb;font-size:9pt}
#mail{color:#fff;text-decoration:none}
#view{padding-top:2px;width:174px;height:25px;background-color:#bdf;color:#09365f}
#view-t{text-align:left;font-weight:700;font-size:14px}
#view-img{padding-bottom:10px;background-color:#5da6eb;text-align:center}
.view-imgs span{margin:0,auto;padding-top:10px;width:200px;color:#fff}
.view-imgs img{margin-top:10px;border:1px solid;color:#fff}
#snack{padding-top:2px;width:174px;height:25px;background-color:#bdf;color:#09365f}
#snack-t{text-align:left;font-weight:700;font-size:14px}
#snack-img{padding-bottom:10px;text-align:center}
#snack-img,#snack-ul{background-color:#5da6eb}
#snack-ul{height:93pt}
#snack-ul ul{padding-top:20px;padding-left:20px;color:#fff;list-style-image:url(img/icon1.gif);font-size:13px}
#snack-ul ul li{margin:0;padding:0;padding-left:5px;width:130px;border-bottom:dashed 1px #fff}
#hotel{padding-top:2px;width:174px;height:25px;background-color:#bdf;color:#09365f}
#hotel-t{text-align:left;font-weight:700;font-size:14px}
#hotel-ul{height:165px;background-color:#5da6eb}
#hotel-ul ul{padding-top:20px;padding-left:20px;color:#fff;font-size:13px}
#hotel-ul ul li{margin:0;padding:0;padding-left:5px;width:130px;border-bottom:dashed 1px #fff;list-style-image:url("img/icon1.gif");}
</style>
<!--coding by jtahstu on 2016/5/25-->
</head>
<body>
<div id="container">
<div id="logo"></div>
<div id="nav">
<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>
<li><a href="#">游记精选</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">雁过留声</a></li>
</ul>
</div>
<div id="left">
<div id="weather">
<div id="weather-h">
<span>天气查询</span>
</div>
<div id="weather-b">
<ul id="weather-li">
<li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
<li><span>吐鲁番 多云转阴 20℃-28℃</span></li>
<li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
<li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
<li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
</ul>
</div>
<div id="recommend">
<img src="img/icon2.gif" class="icon"/>
<span id="recommend-t">
今日推荐
</span>
<div id="recommend-img">
<div class="recommend-imgs" >
<img src="img/tuijian1.jpg"/>
<br />
<span>克拉斯河</span>
</div>
<div class="recommend-imgs">
<img src="img/tuijian2.jpg"/>
<br />
<span>布尔津</span>
</div>
<div class="recommend-imgs">
<img src="img/tuijian3.jpg"/>
<br />
<span>天山之路</span>
</div>
</div>
</div>
</div>
</div>
<div id="middel">
<div id="pic-mid">
<img src="img/ghost.jpg"/>
</div>
<img src="img/picture_h1.gif" class="mid-img"/>
<div id="beautiful-ul">
<ul>
<li><img src="img/beauty1.jpg"/></li>
<li><img src="img/beauty2.jpg"/></li>
<li><img src="img/beauty3.jpg"/></li>
<li><img src="img/beauty4.jpg"/></li>
</ul>
</div>
<img src="img/route_h1.gif" class="mid-img"/>
<div id="line-ul">
<ul>
<li>吐鲁番--库尔勒--库车--塔中--和田--喀什</li>
<li>乌鲁木齐--天池--克拉玛依--乌伦古湖--喀纳斯</li>
<li>乌鲁木齐--奎屯--乔尔玛--那拉提--巴音布鲁克</li>
<li>乌鲁木齐--五彩城--建军隔壁--吉木萨尔</li>
</ul>
</div>
</div>
<div id="right">
<div id="view">
<img src="img/icon2.gif" class="icon"/>
<span id="view-t">
新疆风光
</span>
<div id="view-img">
<div class="view-imgs" >
<img src="img/map1.jpg"/>
</div>
<div class="view-imgs">
<img src="img/map2.jpg"/>
</div>
</div>
<div id="snack">
<img src="img/icon2.gif" class="icon"/>
<span id="snack-t">
小吃推荐
</span>
<div id="snack-ul">
<ul>
<li>17号抓饭</li>
<li>大盘鸡</li>
<li>五一夜市</li>
<li>水果</li>
</ul>
</div>
<div id="hotel">
<img src="img/icon2.gif" class="icon"/>
<span id="hotel-t">
宾馆酒店
</span>
<div id="hotel-ul">
<ul>
<li>美丽华大酒店</li>
<li>海德大酒店</li>
<li>银都大酒店</li>
<li>鸿福大酒店</li>
<li>友好大酒店</li>
<li>棉麻宾馆</li>
<li>电信宾馆</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>jtahstu©版权所有 <a id="mail" href="mailto:root@jtahstu.com">root@jtahstu.com</a></p>
</div>
</div>
</body>
</html>
代码下载地址：http://cdn.jtup.cc/zip/xjxzs.zip ---
本文章采用 知识共享署名2.5中国大陆许可协议 进行许可，欢迎转载，演绎或用于商业目的。
---
发表评论