旅游网页
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title>導航欄</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?@import url("css/dh.css");
?? ??? ?</style>
?? ??? ?
?? ?</head>
?? ?<body>
<div id="con">
? ? <div id="banner"><img src="img/banner.jpg"></div>
? ? <div id="globallink">
? ? ? ? <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>
? ? ? ? <br>
? ? </div>
<div ?id="left">
?? ?
?? ?<div id="weather">
?? ??? ?<h3><span>天氣查詢</span></h3>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> 烏魯木齊 雷陣雨 20℃-31℃</li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> 吐魯番 多云轉陰 20℃-28℃</li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> 喀什 陣雨轉多云 25℃-32℃</li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> 庫爾勒 陣雨轉陰 21℃-28℃</li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> 克拉馬依 雷陣雨 26℃-30℃</li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <br>
? ? ? ? </div> ?
? ? ? ? <div id="today">
? ? ? ? ? ? <h3><span>今日推薦</span></h3>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><img src="img/tuijian1.jpg"></a></li>
? ? ? ? ? ? ? ? <li>喀納斯河</a></li>
? ? ? ? ? ? ? ? <li><img src="img/tuijian2.jpg"></a></li>
? ? ? ? ? ? ? ? <li>布爾津</a></li>
? ? ? ? ? ? ? ? <li><img src="img/tuijian3.jpg"></a></li>
? ? ? ? ? ? ? ? <li>天山之路</a></li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <br>
? ? ? ? </div>
? ? </div>
?<div id="middle">
? ? ? ? <div id="ghost"><a href="#" title="魔鬼城探秘"><img src="img/ghost.jpg" border="0"></a></div>
? ? ? ? <div id="beauty">
? ? ? ? ? ? <img src="img/picture_h1.gif" />
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="#"><img src="img/beauty1.jpg"></a></li>
? ? ? ? ? ? ? ? <li><a href="#"><img src="img/beauty2.jpg"></a></li>
? ? ? ? ? ? ? ? <li><a href="#"><img src="img/beauty3.jpg"></a></li>
? ? ? ? ? ? ? ? <li><a href="#"><img src="img/beauty4.jpg"></a></li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <br>
? ? ? ? </div>
? ? ? ? ?<div id="lx">
? ? ? ? ?<img src="img/route_h1.gif" />
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> <a href="#">吐魯番——庫爾勒——庫車——塔中——和田——喀什</a></li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> <a href="#">烏魯木齊——天池——克拉馬依——烏倫古湖——喀納斯</a></li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> <a href="#">烏魯木齊——奎屯——喬爾瑪——那拉提——巴音布魯克</a></li>
? ? ? ? ? ? ? ? <li><img src="img/icon1.gif"> <a href="#">烏魯木齊——五彩城——將軍隔壁——吉木薩爾</a></li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <br>
? ? ? ? </div>
? ? </div>
<div id="right">
? ? ? ? <div id="map">
? ? ? ? ? ? <h3><span>新疆風光</span></h3>
? ? ? ? ? ? <p><a href="#" title="點擊看大圖"><img src="img/map1.jpg"></a></p>
? ? ? ? ? ? <p><a href="#" title="點擊看大圖"><img src="img/map2.jpg"></a></p>
? ? ? ? </div>
?<div id="food">
? ? ? ? ? ? <h4><span>小吃推薦</span></h4>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="#">17號抓飯</a></li>
? ? ? ? ? ? ? ? <li><a href="#">大盤雞</a></li>
? ? ? ? ? ? ? ? <li><a href="#">五一夜市</a></li>
? ? ? ? ? ? ? ? <li><a href="#">水果</a></li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <br>
? ? ? ? </div>
?<div id="life">
? ? ? ? ? ? <h3><span>賓館酒店</span></h3>
? ? ? ? ? ? <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>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <br>
? ? ? ? </div>
? ? </div>
?<div id="footer">
? ? ? ? <p>艾薩克 ©版權所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
? ? </div>
?</div>
</body>
</html>
CSS
body{
? ? background-color:#2286c6;
? ? margin: 0px;
? ? padding:0px;
? ? text-align:center;
? ? font-size:12px;
? ? font-family: "微軟雅黑";
}
#con{
? ? position:relative;
? ? margin:0px auto 0px auto;
? ? width:780px;
? ? text-align:left;
}
div br{
?? ?display: none;
}
#globallink{
?? ?margin: 0px;
?? ?padding: 0px;
}
#globallink ul{
?? ?list-style: none;
?? ?margin: 0px; padding: 0px;
}
#globallink li{
?? ?float: left;
?? ?text-align: center;
?? ?width: 78px;
}
?? ?#globallink a{
? ? display:block;
? ? padding:9px 6px 11px 6px;
?background: url(../img/button1.jpg) no-repeat;
? ? margin:0px;
}
#globallink a:hover{
?? ?color: ?darkorange;
?? ?background:url(button1_bg.jpg) no-repeat;
}
#left{
? ? float:left;
? ? width:200px;
? ? background-color:#FFFFFF;
? ? margin:0px;
? ? padding:0px 0px 0px 0px;
? ? color:#d8ecff;
}
#left div{
? ? background-color:#5ea6eb;
? ? margin:0px 5px 5px 5px;
? ? }
?#weather{
? ? background: url(../img/weather.jpg)no-repeat -5px 0px;
? ? margin:0px 5px 0px 5px;?
? ? background-color:#5ea6eb;
}
div#left #weather h3{
? ? font-size:12px;
? ? padding:24px 0px 0px 74px;
? ? color:#FFFFFF;
? ? background:none;
? ? margin:0px;
}
div#weather ul{
? ? margin:8px 5px 0px 5px;
? ? padding:0px 0px 8px 5px; ??
? ? list-style:none;
}
?#left ul{
? ? text-align: center;
?? ?list-style: none;
?? ?margin: 0px; padding: 0pxpx;
}
#left div h3{
? ? font-size:12px;
? ? padding:4px 0px 2px 15px;
? ? color: red;
? ? margin:0px 0px 5px 0px;
? ? background:#bbddff url(../img/icon2.gif) no-repeat 5px 7px;
}
#today{
? ? padding:0px 0px 10px 0px;
}
#today ul{
? ? list-style:none;
? ? margin:-5px 0px 0px 0px;
? ? padding:0px;
}
#today ul li{ ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? text-align:center;
}
#today ul li img{
? ? border:1px solid #FFFFFF;
? ? margin:8px 0px 0px 0px;
}
#today ul li img{
? ? border:1px solid #FFFFFF;
? ? margin:8px 0px 0px 0px;
}
#today ul li img{
? ? border:1px solid #FFFFFF;
? ? margin:8px 0px 0px 0px;
}
#middle{
? ? background-color:#FFFFFF;
? ? margin:0px 0px 0px 2px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? padding:5px 0px 0px 0px;
? ? width:400px; float:left;
}
#middle div{
? ? margin-left:5px;
? ? margin-right:5px;
? ? position:relative;
? ? margin: 0px 0px 0px 0px;
}
#beauty{
? ? margin:15px 0px 0px 0px;
? ? padding:0px;
}
#beauty ul{
? ? list-style:none;
? ? margin:8px 1px 0px 1px;
? ? padding:0px;
}
#beauty ul li{
? ? float:left;
? ? width:97px;
? ? text-align:center;
}
#beauty ul li img{
? ? border:1px solid #4ab0ff;
}
#lx{
? ? margin:0px 0px 5px 0px;
? ? padding:10px 0px 0px 10px;
}
#lx ul{
?? ?margin-bottom: 30px;
?? ?padding: 10px 0px 0px 20px;?? ?
?? ?
}
#lx ul li{
?? ?list-style: none;
?? ?
}
#lx a:hover{
?? ?color: ? #2286C6;
}
#lx a{
?? ?text-decoration: none;
}
#right{
? ? float:left;
? ? margin:0px 0px 1px 2px;
? ? width:176px;
? ? background-color: white;
? ? color:#d8ecff;
}
#right div{
?? ?
? ? background-color:#5ea6eb;
? ? margin:0px 5px 5px 5px;
? ? }
?#right div h3{
? ? font-size:12px;
? ? padding:4px 0px 2px 15px;
? ? color: red;
? ? margin:5px 0px 5px 0px;
? ? background:#bbddff url(../img/icon2.gif) no-repeat 5px 7px;
}
?#right div h4{
? ? font-size:12px;
? ? padding:0px 0px 2px 15px;
? ? color: red;
? ? margin:0px 0px 5px 0px;
? ? background:#bbddff url(../img/icon2.gif) no-repeat 5px 7px;
}
#map{
? ? margin-top:0px;?
}
#map p{
? ? text-align:center;
? ? margin:0px;
? ? padding:6px 0px 10px 0px;
? ? background-color: #4AB0FF;
}
#map p img{
? ? border:1px solid #FFFFFF;
}
#food{
?? ?background-color: #2286C6;
? ?margin-top: -10px;
}
#food ul, #life ul{
? ? list-style:none;
? ? padding:5px 0px 10px 0px;
? ? margin:0px 10px 0px 10px;
}
#food ul li, #life ul li{
? ? background:url(icon1.gif) no-repeat 3px 9px;
? ? padding:0px 0px 3px 12px;
? ? border-bottom:1px dashed #EEEEEE;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
? ? color:#d8ecff;
? ? text-decoration:none;
}
#food ul li a:hover, #life ul li a:hover{
? ? color:#000000;
? ? text-decoration:none;
}
#life{
? ? padding-top:10px;
? ? padding-bottom:5px;
? ? margin-bottom:0px;
}
#footer{
? ? background-color:#FFFFFF;
? ? margin:20px 0px 0px 0px;
? ? clear:both;
? ? position:relative;
? ? padding:1px 0px 1px 0px;
}
#footer p{
? ? text-align:center;
? ? padding:0px;
? ? margin:4px 5px 4px 5px;
? ? background-color:#5ea6eb;
}
#footer p a{
? ? color:#FFFFFF;
? ? text-decoration:none;
}
?
總結
- 上一篇： 2023北京体育大学计算机考研信息汇总
- 下一篇： 下一代智能手机2011