本文代码为CSS定位与DIV布局实战-新疆行知书网页设计的代码
by:arsoooo
网页效果如下:
源代码(相关文件下载在最后)
index.html文件代码
//index.html的代码如下
<!doctype html>
<html>
<head>
<title>新疆旅游-arsoooo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="keywords" content="新疆"/>
<meta name="description" content="新疆是个好地方"/>
<link href="css.css" rel="stylesheet" type="text/css">
<style type="">
</style>
</head>
<body>
<!--整体外层容器-->
<div id="container">
<!--banner条-->
<div id="banner">
<img src="images/banner.jpg" alt="新疆风光">
</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>
</div>
<!--左侧栏-->
<div id="left">
<div id="weather">
<h3><span>天气查询</span></h3>
<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="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="images\tuijian1.jpg"></a></li>
<li><a href="#">喀纳斯河</a></li>
<li><a href="#"><img src="images\tuijian2.jpg"></a></li>
<li><a href="#">布尔津</a></li>
<li><a href="#"><img src="images\tuijian3.jpg"></a></li>
<li><a href="#">天山之路</a></li>
</ul>
</div>
</div>
<!--中间栏-->
<div id="middle">
<div id="ghost">
<a href="#" title="魔鬼域探秘"><img src="images\ghost.jpg"
border="0"></a>
</div>
<div id="beauty">
<h3><span>美景寻踪</span></h3>
<ul>
<li><a href="#"><img src="images\beauty1.jpg"></a></li>
<li><a href="#"><img src="images\beauty2.jpg"></a></li>
<li><a href="#"><img src="images\beauty3.jpg"></a></li>
<li><a href="#"><img src="images\beauty4.jpg"></a></li>
</ul>
</div>
<div id="route">
<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>
</ul>
</div>
</div>
<!--右侧栏-->
<div id="right">
<div id="map">
<h3><span>新疆风光</span></h3>
<p><a href="#" title="点击看大图"><img src="images\map1.jpg"></a></p>
<p><a href="#" title="点击看大图"><img src="images\map2.jpg"></a></p>
</div>
<div id="food">
<h3><span>小吃推荐</span></h3>
<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="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>
</div>
</div>
<!--脚注-->
<div id="footer">
<p>arsoooo©版权所有
<a href="mailto:980815161@qq.com">980815161@qq.com</a>
</p>
</div>
</div>
</body>
</html>
css.css文件
//css.css的代码如下:
body{
background:#2286c6;
margin:0px;
padding:0px;
font-size:12px;
font-family:Arial;
}
#container{
margin:0px auto;
width:780px;
height:600px;
text-align:left;
background:#123456;
}
#banner{
margin:0px;
padding:0px;
width:100%;
height:150px;
background:#778899;
}
#globallink{
margin:0px;
padding:0px;
}
#globallink ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#globallink ul li{
float:left;
text-align:center;
width:78px;
}
#globallink ul li a{
display:block;
padding:7px 6px 7px 6px;
margin:0px;
background:url("images/button1.jpg") no-repeat;
}
#globallink a:link {
color:#004a87;
text-decoration:none;
} /* 未被访问的链接 */
#globallink a:visited {
color:#004a87;
text-decoration:none;
} /* 已被访问的链接 */
#globallink a:hover {
text-decoration:underline;
background:url("images/button1_bg.jpg") no-repeat;
} /* 鼠标指针移动到链接上 */
#globallink a:active {text-decoration:underline;} /* 正在被点击的链接 */
#left{
margin:0px;
padding:0px 0px 5px 0px;
width:200px;
background:white;
color:#d8ecff;
float:left;
}
#weather{
background:url("images/weather.jpg") no-repeat -5px -5px;
margin:0px 5px;
background-color:#5ea6eb;
}
#weather h3{
font-size:12px;
padding:16px 0px 0px 74px;
margin:5px;
}
#weather ul{
margin:8px 5px 0px 5px;
padding:10px 0px 8px 5px;
list-style-type:none;
}
#weather ul li{
background:url("images/icon1.gif") no-repeat 0px 6px;
padding:0px 0px 0px 10px;
}
#today{
background:#5ea6eb;
margin:0px 5px 0px 5px;
padding:0px 0px 10px 0px;
}
#today h3{
color:#003973;
font-size:12px;
background:#bbddff url("images/icon2.gif") no-repeat 5px 9px;
padding:4px 0px 0px 15px;
margin:0px 0px 5px 0px;
}
#today ul{
margin:-1px 0px 0px 0px;
padding:0px;
list-style-type:none;
}
#today ul li{
text-align:center;
}
#today ul li img{
border:1px solid #ffffff;
margin:8px 0px 0px 0px;
}
#today ul li a:link,#today ul li a:visited {
color:#d8ecff;
text-decoration:none;
} /* 未被访问的链接+已被访问的链接 */
#today ul li a:hover {
text-decoration:underline;
color:#ffff00;
} /* 鼠标指针移动到链接上 */
#middle{
margin:0px 2px;
padding:5px 0px 5px 0px;
width:400px;
background:white;
float:left;
}
#middle div{
margin:0px 5px;
}
#middle h3{
margin:0px;
padding:0px;
height:41px;
}
#middle h3 span{
display:none;/*去掉span内文字,换成背景图片*/
}
#beauty{
margin:15px 0px 0px 0px;
padding:0px;
}
#beauty h3{
background:url("images/picture_h1.gif") no-repeat;
}
#beauty ul,#route ul{ /*此处设置margin上高度可以使left和middle下底边对齐*/
list-style-type:none;
margin:15.5px 1px 0px 1px;
padding:0px;
}
#beauty ul li{
float:left;
width:97px;
text-align:center;
}
#beauty ul li img{
border:1px solid #4ab0ff;/*实线solid*/
}#route{
clear:left;
margin:0px;
padding:5px 0px 15px 0px;
}
#route h3{
background:url("images/route_h1.gif") no-repeat;
}
#route ul li{
background:url("images/icon1.gif") no-repeat 20px 9px;
padding:3px 0px 0px 30px;
}
#route ul li a:link,#today ul li a:visited {
color:#d8ecff;
text-decoration:none;
} /* 未被访问的链接+已被访问的链接 */
#route ul li a:hover {
text-decoration:underline;
color:black;
} /* 鼠标指针移动到链接上 */
#right{
margin:0px;
padding:0px 0px 5px 0px;
width:176px;
background:#ffffff;
float:left;
}
#right div{
margin:0px 5px;
background:#5ea6eb;
}
#right h3{
color:#003973;
font-size:12px;
background:#bbddff url("images/icon2.gif") no-repeat 5px 9px;
padding:4px 0px 2px 15px;
margin:4.5px 0px 5px 0px; /*此处设置margin上高度可以使left和middle下底边对齐*/
}
#map p{
text-align:center;
margin:0px;
padding:2px 0px 5px 0px;
}
#map p img{
border:1px solid #ffffff;
margin:4px 0px 0px 0px;
}
#food ul,#life ul{
list-style-type:none;
padding:0px 0px 10px 0px;
margin:10px 10px 0px 10px;
}
#food ul li,#life ul li{
background:url("images/icon1.gif") no-repeat 3px 9px;
padding: 3px 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 {
text-decoration:underline;
color:black;
}
#footer{
margin:0px;
padding:1px 0px;
background:white;
clear:left;
}
#footer p{
text-align:center;
padding:0px;
margin:4px 5px;
background:#5ea6eb;
}
#footer p a{
color:white;
text-decoration:none;
}
相关文件下载,仅供学习交流:
链接:https://pan.baidu.com/s/1TotOTu3E8tWqCcNxEvpvtQ 密码:792j
~转载注明出处@arsoooo