旅游网页

最新推荐文章于 2023-05-14 17:51:15 发布

yklrxy123

最新推荐文章于 2023-05-14 17:51:15 发布

阅读量757

点赞数 1

本文链接：https://blog.csdn.net/yklrxy123/article/details/100563214

版权

<!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;
}