这个东西也花了本人一天的时间做的,兼容上有点小瑕疵,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中国大陆许可协议 进行许可,欢迎转载,演绎或用于商业目的。
---
发表评论