css页面布局实例.docx
- 文档编号:26833719
- 上传时间:2023-06-23
- 格式:DOCX
- 页数:29
- 大小:16.52KB
css页面布局实例.docx
《css页面布局实例.docx》由会员分享,可在线阅读,更多相关《css页面布局实例.docx(29页珍藏版)》请在冰豆网上搜索。
css页面布局实例
css页面布局实例
css页面布局实例
2011-04-2821:
57
body{
background-color:
#2286c6;
margin:
0px;
padding:
0px;
text-align:
center;
font-size:
12px;
font-family:
Arial,Helvetica,sans-serif;
}
#container{
position:
relative;
margin:
0pxauto0pxauto;
width:
780px;
text-align:
left;
}
divbr{
display:
none;
}
#globallink{
margin:
0px;padding:
0px;
}
#globallinkul{
list-style:
none;
padding:
0px;margin:
0px;
}
#globallinkli{
float:
left;
text-align:
center;
width:
78px;
}
#globallinka{
display:
block;
padding:
9px6px11px6px;
background:
url(button1.jpg)no-repeat;
margin:
0px;
}
#globallinka:
link,#globallinka:
visited{
color:
#004a87;
text-decoration:
underline;
}
#globallinka:
hover{
color:
#FFFFFF;
text-decoration:
underline;
background:
url(button1_bg.jpg)no-repeat;
}
#left{
float:
left;
width:
200px;
background-color:
#FFFFFF;
margin:
0px;
padding:
0px0px5px0px;
color:
#d8ecff;
}
#leftdiv{
background-color:
#5ea6eb;
margin:
0px5px0px5px;
}
#weather{
background:
url(weather.jpg)no-repeat-5px0px;
margin:
0px5px0px5px;
background-color:
#5ea6eb;
}
div#left#weatherh3{
font-size:
12px;
padding:
24px0px0px74px;
color:
#FFFFFF;
background:
none;
margin:
0px;
}
div#weatherul{
margin:
8px5px0px5px;
padding:
10px0px8px5px;
list-style:
none;
}
#weatherulli{
background:
url(icon1.gif)no-repeat0px6px;
padding:
1px0px0px10px;
}
#leftdivh3{
font-size:
12px;
padding:
4px0px2px15px;
color:
#003973;
margin:
0px0px5px0px;
background:
#bbddffurl(icon2.gif)no-repeat5px7px;
}
#today{
padding:
0px0px10px0px;
}
#todayul{
list-style:
none;
margin:
-5px0px0px0px;
padding:
0px;
}
#todayulli{
text-align:
center;
}
#todayulliimg{
border:
1pxsolid#FFFFFF;
margin:
8px0px0px0px;
}
#todayullia:
link,#todayullia:
visited{
color:
#d8ecff;
text-decoration:
none;
}
#todayullia:
hover{
color:
#FFFF00;
text-decoration:
underline;
}
#middle{
background-color:
#FFFFFF;
margin:
0px0px0px2px;
padding:
5px0px0px0px;
width:
400px;float:
left;
}
#middlediv{
margin-left:
5px;
margin-right:
5px;
position:
relative;
}
#middleh3{
margin:
0px;padding:
0px;
height:
41px;
}
#middleh3span{
display:
none;/*文字去掉,换成图片*/
}
#beauty{
margin:
15px0px0px0px;
padding:
0px;
}
#beautyh3{
background:
url(picture_h1.gif)no-repeat;
}
#beautyul,#routeul{
list-style:
none;
margin:
8px1px0px1px;
padding:
0px;
}
#beautyulli{
float:
left;
width:
97px;
text-align:
center;
}
#beautyulliimg{
border:
1pxsolid#4ab0ff;
}
#route{
clear:
both;margin:
0px;
padding:
5px0px15px0px;
}
#routeh3{
background:
url(route_h1.gif)no-repeat;
}
#routeulli{
padding:
3px0px0px30px;background:
url(icon1.gif)no-repeat20px7px;
}
#routeullia:
link,#routeullia:
visited{
color:
#004e8a;
text-decoration:
none;
}
#routeullia:
hover{
color:
#000000;
text-decoration:
underline;
}
#right{
float:
left;
margin:
0px0px1px2px;
width:
176px;
background-color:
#FFFFFF;
color:
#d8ecff;
}
#rightdiv{
position:
relative;
margin-left:
5px;
margin-right:
5px;
background-color:
#5ea6eb;
}
#rightdivh3{
font-size:
12px;
padding:
4px0px2px15px;
color:
#003973;
margin:
0px0px5px0px;
background:
#bbddffurl(icon2.gif)no-repeat5px7px;
}
#map{
margin-top:
5px;
}
#mapp{
text-align:
center;
margin:
0px;
padding:
2px0px5px0px;
}
#mappimg{
border:
1pxsolid#FFFFFF;
}
#food{
padding-top:
10px;
}
#foodul,#lifeul{
list-style:
none;
padding:
0px0px10px0px;
margin:
10px10px0px10px;
}
#foodulli,#lifeulli{
background:
url(icon1.gif)no-repeat3px9px;
padding:
3px0px3px12px;
border-bottom:
1pxdashed#EEEEEE;
}
#foodullia:
link,#foodullia:
visited,#lifeullia:
link,#lifeullia:
visited{
color:
#d8ecff;
text-decoration:
none;
}
#foodullia:
hover,#lifeullia:
hover{
color:
#000000;
text-decoration:
none;
}
#life{
padding-top:
10px;
padding-bottom:
5px;
margin-bottom:
5px;
}
#footer{
background-color:
#FFFFFF;
margin:
1px0px0px0px;
clear:
both;
position:
relative;
padding:
1px0px1px0px;
}
#footerp{
text-align:
center;
padding:
0px;
margin:
4px5px4px5px;
background-color:
#5ea6eb;
}
#footerpa{
color:
#FFFFFF;
text-decoration:
none;
}
Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html>
<head>
<title>新疆行知书</title>
<linkhref="20.css"rel="stylesheet"type="text/css">
</head>
<body>
<divid="container">
<divid="banner"><img
src="banner.jpg"></div>
<divid="globallink">
<ul>
<li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#"><li><ahref="#">
首页</a></li>
新疆简介</a></li>
风土人情</a></li>
吃在新疆</a></li>
路线选择</a></li>
自助行</a></li>
拍照摄像</a></li>
游记优选</a></li>
资源下载</a></li>
雁过留声</a></li>
</ul>
<br>
</div>
<divid="left">
<divid="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>
<br>
</div>
<divid="today">
<h3><span>今天介绍</span></h3>
<ul>
<li><ahref="#"><img
src="tuijian1.jpg"></a></li>
<li><ahref="#">喀纳斯河</a></li>
<li><ahref="#"><img
src="tuijian2.jpg"></a></li>
<li><ahref="#">布尔津</a></li>
<li><ahref="#"><img
src="tuijian3.jpg"></a></li>
<li><ahref="#">天山之路</a></li>
</ul>
<br>
</div>
</div>
<divid="middle">
<divid="ghost"><ahref="#"title="魔鬼城探秘
"><imgsrc="ghost.jpg"
border="0"></a></div>
<divid="beauty">
<h3><span>美景寻踪</span></h3><ul>
<li><ahref="#"><img
src="beauty1.jpg"></a></li>
<li><ahref="#"><img
src="beauty2.jpg"></a></li>
<li><ahref="#"><img
src="beauty3.jpg"></a></li>
<li><ahref="#"><img
src="beauty4.jpg"></a></li>
</ul>
<br>
</div>
<divid="route">
<h3><span>线路优选</span></h3>
<ul>
<li><ahref="#">吐鲁番——库尔勒——库车
——塔中——和田——喀什</a></li>
<li><ahref="#">乌鲁木齐——天池——克拉
马依——乌伦古湖——喀纳斯</a></li>
<li><ahref="#">乌鲁木齐——奎屯——乔尔
玛——那拉提——巴音布鲁克</a></li>
<li><ahref="#">乌鲁木齐——五彩城——将
军近邻——吉木萨尔</a></li>
</ul>
<br>
</div>
</div>
<divid="right">
<divid="map">
<h3><span>新疆风光</span></h3>
<p><ahref="#"title="点击看大图"><img
src="map1.jpg"></a></p>
<p><ahref="#"title="点击看大图"><img
src="map2.jpg"></a></p>
</div>
<divid="food">
<h3><span>小吃介绍</span></h3>
<ul>
<li><ahref="#">17号抓饭</a></li>
<li><ahref="#">大盘鸡</a></li>
<li><ahref="#">五一夜市</a></li>
<li><ahref="#">水果</a></li>
</ul>
<br>
</div>
<divid="life">
<h3><span>旅馆酒店</span></h3>
<ul>
<li><ahref="#">漂亮华大饭馆
</a></li>
<li><ahref="#">海德大饭馆
</a></li>
<li><ahref="#">银都大饭馆
</a></li>
<li><ahref="#">洪福大饭馆
</a></li>
<li><ahref="#">友善大酒店
</a></li>
<li><ahref="#">
棉麻旅馆
</a></li>
<li><ahref="#">
电信旅馆
</a></li>
</ul>
<br>
</div>
</div>
<divid="footer">
<p>艾萨克©版权全部<ahref="mailto:
demo@">demo@</a></p>
</div>
</div>
</body>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 页面 布局 实例