[新疆行照片](http://sji1r5tg3.sabkt.gdipper.com/%E6%96%B0%E7%96%86%E8%A1%8C.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新疆行</title>
<link rel="stylesheet" href="./css/top.css">
<link rel="stylesheet" href="./css/left.css">
<link rel="stylesheet" href="./css/center.css">
<link rel="stylesheet" href="./css/right.css">
</head>
<body>
<!-- 整体 -->
<div id="main">
<!-- 顶部 -->
<div id="top">
<div id="banner"></div>
<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"><a href="#">天气查询</a></div>
<div id="icon1">
<ul>
<li>乌鲁木齐 雷阵雨 20℃-31℃</li>
<li>吐鲁番 多云转阴 20℃-28℃</li>
<li>喀什 阵雨转多云 25℃-32℃</li>
<li>库尔勒 阵雨转阴 21℃-28℃</li>
<li>克拉马依 雷阵雨 26℃-30℃</li>
</ul>
</div>
<!-- 今日推荐 -->
<div id="icon2">
<ul>
<li>今日推荐</li>
</ul>
</div>
<div id="tuijian">
<img src="./tu/tuijian1.jpg" alt="" class="border"><a href="#">喀纳斯河</a>
<img src="./tu/tuijian2.jpg" alt="" class="border"><a href="#">布尔津</a>
<img src="./tu/tuijian3.jpg" alt="" class="border"><a href="#">天山之路</a>
</div>
</div>
<!-- 中间 -->
<div id="center">
<div id="ghost"></div>
<div id="picture"></div>
<div id="beauty">
<img src="./tu/beauty1.jpg" alt="" class="piaoliang">
<img src="./tu/beauty2.jpg" alt="" class="piaoliang">
<img src="./tu/beauty3.jpg" alt="" class="piaoliang">
<img src="./tu/beauty4.jpg" alt="" class="piaoliang">
</div>
<div id="route"></div>
<div id="luxian">
<ul>
<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
<li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
</ul>
</div>
</div>
<!-- 右边 -->
<div id="right">
<div id="xin">
<ul>
<li>新疆风光</li>
</ul>
</div>
<div id="right1">
<img src="./tu/tuijian2.jpg" alt="" class="border">
<img src="./tu/tuijian2.jpg" alt="" class="border">
</div>
<!-- 小吃推荐 -->
<div id="xiao"><ul>
<li>小吃推荐</li>
</ul></div>
<div id="xiaochi">
<ul>
<li><a href="#">17号抓饭</a></li>
<li><a href="#">大盘鸡</a></li>
<li><a href="#">五一夜市</a></li>
<li><a href="#">水果</a></li>
</ul>
</div>
<!-- 宾馆酒店 -->
<div id="binguan">
<div id="jiudian">
<ul>
<li>宾馆酒店</li>
</ul>
</div>
<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>
</div>
</div>
<!-- 底部 -->
<div id="bottom"><span class="black">艾萨克 @版权所有</span> <span class="zi">demo@demo.com</span></div>
</div>
</body>
</html>/* 整体布局，导航栏 */
*{
margin: 0px auto;
padding: 0px;
font-size: 12px;
color: rgb(37, 112, 252);
border: none;
}
body{
background-color:rgb(101, 101, 241) ;
}
li{
list-style: none;
}
/* 整体 */
#main{
width: 780px;
height: 900px;
}
/* 头部 */
#banner{
width: 780px;
height: 150px;
background-image: url(../tu/banner.jpg);
}
/* 导航栏 */
#top a{
float: left;
width: 78px;
height: 33px;
line-height: 33px;
text-align: center;
background-image: url(../tu/button1.jpg);
}
/* 导航栏悬停 */
#top a:hover{
background-image: url(../tu/button1_bg.jpg);
}
/* 底部 */
#bottom{
width: 776px;
margin-top: 5px;
border: 3px solid white;
clear: both;
text-align: center;
background-color: rgb(106, 136, 232);
}
.zi{
color: white;
}
.black{
color: black;
}
/* 图片边框 */
.border{
border: 1px solid white;
}
/* 字体悬停 */
#icon1 li:hover,#luxian a:hover,#xiaochi a:hover,#binguan a:hover{
color: yellowgreen;
}
/* 中间整体 */
#center{
width: 375px;
height: 630px;
float: left;
margin: 2px;
background-color: #ffffff;
}
/* 图片 */
#ghost{
width: 365px;
height: 260px;
border: 4px solid white;
background-image: url(../tu/ghost.jpg);
}
/* 美景寻踪 */
#picture{
width: 370px;
height: 41px;
margin-top: 8px;
background: url(../tu/picture_h1.gif) no-repeat ;
}
#beauty{
margin: 5px;
padding: 3px;
}
/* 线路精选 */
#route{
width: 370px;
height: 41px;
margin-bottom: 10px;
background: url(../tu/route_h1.gif) no-repeat;
}
#luxian a{
text-decoration: none;
margin-left: 20px;
margin-top: 1px;
padding: 10px;
background: url(../tu/icon1.gif) no-repeat 1px;
}
#luxian li{
padding-bottom: 5px;
}
/* 美景寻踪边框设置 */
.piaoliang{
border: 1px solid blue;
}/* 左边整体 */
#left{
width: 190px;
float: left;
margin-top: 2px;
border: 5px solid white;
background-color: rgb(107, 141, 250)
}
/* 天气查询 */
#weather{
width: 188px;
height:42px;
background-image: url(../tu/lgcWeather.jpg);
}
#weather a{
text-decoration: none;
padding-left: 80px;
line-height: 42px;
color: white;
}
#icon1 li{
padding-bottom: 1px;
padding-left: 10px;
margin: 5px;
color: white;
background: url(../tu/icon1.gif) no-repeat 1px ;
}
/* 今日推荐 */
#icon2{
width: 191px;
height: 20px;
background-color: whitesmoke;
}
#icon2 li{
padding-left: 15px;
color: blue;
font-size: 14px;
background:url(../tu/icon2.gif) no-repeat 5px;
}
#tuijian{
margin: 6px;
}
#tuijian a{
text-decoration: none;
margin: 30%;
color: aliceblue;
}
#tuijian img{
margin: 4px;
}
/* 右边整体 */
#right{
width: 190px;
float: right;
margin-top: 1px;
border: 5px solid white;
background-color: rgb(93, 165, 241);
}
/* 新疆风光 */
#xin li{
margin-left: 10px;
padding-left: 10px;
color: rgb(20, 20, 204);
font-size: 14px;
background: url(../tu/icon2.gif) no-repeat 1px;
}
#xin{
width: 191px;
background-color:whitesmoke ;
}
#right1{
margin-left: 10px;
margin-top: 14px;
margin-bottom: 10px;
}
/* 小吃推荐 */
#xiao li{
padding-left: 10px;
margin-left: 10px;
font-size: 14px;
color: blue;
background: url(../tu/icon2.gif)no-repeat 1px ;
}
#xiao{
width: 191px;
background-color: whitesmoke;
}
#xiaochi li{
width: 170px;
height: 20px;
margin-bottom: 5px;
border-bottom: 1px dashed white;
}
#xiaochi a{
text-decoration: none;
margin-left: 15px;
padding-left: 10px;
color: white;
background: url(../tu/icon1.gif) no-repeat 1px;
}
/* 宾馆酒店 */
#jiudian{
width: 191px;
background-color: ivory;
}
#jiudian li{
padding-left: 10px;
margin-left: 10px;
font-size: 14px;
color: blue;
background: url(../tu/icon2.gif) no-repeat 1px;
}
#binguan a{
text-decoration: none;
margin-left: 15px;
color: white;
padding-left: 10px;
background: url(../tu/icon2.gif) no-repeat 1px;
}
#binguan li{
width: 170px;
height: 15px;
padding-bottom: 1px;
margin-bottom: 10px;
border-bottom: 1px dashed white;
}需要照片图片的私信找我噢！！！
扫一扫
2764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
