BS要结了,抽出空来拿CSS+DIV练练手,用了理解的会更深刻,这次做的是个旅游网站的界面(例子源于《精通CSS.DIV网页设计与布局》)。
html代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link style="text/css" rel="stylesheet" href="css/journeyWeb.css"/>
</head>
<body>
<div id="container">
<div id="header">
<img src="image/banner.jpg" alt="图片加载中"/>
</div>
<div id="globalLink">
<ul>
<li><a href=www.baidu.com">首页</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>天气查询</sapn></h3>
<ul>
<li>乌鲁木齐 雷阵雨20℃-31℃</li>
<li>吐鲁番 多云转阴20℃-28℃</li>
<li>柴达木 雷阵雨转多云18℃-25℃</li>
<li>库尔勒 雷阵雨20℃-31℃</li>
<li>克拉玛依 雷阵雨20℃-31℃</li>
</ul>
</div>
<div id="today">
<h3><span>今日推荐</span></h3>
<ul>
<li><a href="#"><img src="image/tuijian1.jpg" ></a></li>
<li class="sceneryname"><a href="#">克纳斯河</a></li>
<li><a href="#"><img src="image/tuijian2.jpg" ></a></li>
<li class="sceneryname"><a href="#">布尔津</a></li>
<li><a href="#"><img src="image/tuijian3.jpg" ></a></li>
<li class="sceneryname"><a href="#">天山之路</a></li>
</ul>
</div>
</div>
<div id="middle">
<div id="ghost">
<img src="image/ghost.jpg" alt="图片加载中"/>
</div>
<div id="beauty">
<h3><img src="image/picture_h1.gif"/></h3>
<ul>
<li><a href="#"><img src="image/beauty1.jpg" /></a></li>
<li><a href="#"><img src="image/beauty2.jpg" /></a></li>
<li><a href="#"><img src="image/beauty3.jpg" /></a></li>
<li><a href="#"><img src="image/beauty4.jpg" /></a></li>
</ul>
<br />
</div>
<div id="route">
<h3><img src="image/route_h1.gif"/></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>新疆风光</h3>
<div><a href="#"><img src="image/map1.jpg" alt="数据加载中"/></a></div>
<div><a href="#"><img src="image/map2.jpg" alt="数据加载中"/></a></div>
</div>
<div id="food">
<h3>小吃推荐</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="lift">
<h3>宾馆酒店</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>清风 © 版权所有<a href="mailto:350676076@qq.com">350676076@qq.com</a></p>
</div>
</div>
</body>
</html>
CSS代码:
html{
margin:0px;
padding:0px;
width:780px;
margin:0 auto;
font-size:12px;
background-color:#2286C6;
}
body{
margin:0px;
padding:0px;
}
#header{
width:780px;
/*background-color:blue;*/
}
#globalLink{
width:780px;
}
#globalLink a{
display:block;
padding:5px;
background-image:url("../image/button1.jpg");
background-repeat:no-repeat;
/*记得行内元素设置长度和宽度不好使,a标签不属于行内元素吗?*/
}
#globalLink ul{
list-style:none;
margin:0px;
padding:0px;
}
#globalLink ul li{
float:left;
width:78px;
text-align:center;
}
#globalLink a:link ,#globalLink a:visited{
color:#004ab7;
text-decoration:underline;
}
#globalLink a:hover{
color:#ffffff;
text-decoration:underline;
background-image:url("../image/button1_bg.jpg");
}
#globalLink a:active{
color:black;
}
#left{
float:left;
width:200px;
background-color:#ffffff;
margin:0px;
padding:0px 0px 5px 0px;
color:#d8ecff;
}
#weather{
background:url(../image/weather.jpg)no-repeat -5px 0px;
background-color:#53a6eb;
margin:0px 5px;
}
#weather h3{
font-size:12px;
padding:24px 0px 0px 74px;
color:#ffffff;
background:none;
margin:0px;
}
#weather ul{
list-style:none;
margin:8px 5px 0px 5px;
padding:10px 0px 8px 5px;
}
#weather ul li{
background:url(../image/icon1.gif) no-repeat 0px 6px;
padding:1px 0px 0px 10px;
}
#today{
background-color:#5EA6EB;
margin:5px;
margin-top:0px;
}
#today h3{
margin:0px;
padding-left:20px;
background-color:#BBDDFF;
background-image:url("../image/icon2.gif");
background-repeat:no-repeat;
background-position:10px 50%;
color:#004AB7;
}
#today ul{
list-style:none;
margin:0px;
padding:8px;
}
#today ul li{
text-align:center;
}
#today.sceneryname{
padding-bottom:6px;
}
#today a:link ,#today a:visited{
color:#D8ECFF;
text-decoration:underline;
}
#today a:hover{
color:#ffffff;
text-decoration:underline;
}
#today a:active{
color:black;
}
#middle{
background-color:#ffffff;
margin:0px 0px 0px 2px;
padding:0px;
padding-left:5px;
width:400px;
float:left;
}
#middle #ghost img{
margin-top:6px;
margin-left:3px;
}
#beauty h3{
margin:4px 0px;
}
#beauty ul{
list-style:none;
margin:0px;
padding:0px;
padding:5px;
}
#beauty ul li{
float:left;
margin-right:9px;
margin-bottom:5px;
border:1px solid blue;
height:123px;
}
#route h3{
margin:4px 0px;
}
#route ul{
list-style:none;
padding:0px;
margin:0px;
padding:15px;
}
#route ul li{
padding:1px 0px;
}
#route a:link ,#route a:visited{
color:#004ab7;
text-decoration:underline;
}
#route a:hover{
color:#000000;
text-decoration:underline;
}
#route a:active{
color:black;
}
#right{
float:left;
margin:0px 0px 1px 2px;
width:171px;
background-color:#5EA6EB;
color:#d8ecff;
}
#right h3{
color:#004AB7;
margin:0px;
background-color:#BBDDFF;
padding:8px;
padding-left:18px;
background-image:url("../image/icon2.gif");
background-repeat:no-repeat;
background-position:7px center;
}
#right #map a{
margin:0px;
}
#right #map a img{
margin:5px 10px;
}
#right a:link ,#right a:visited{
color:#D8ECFF;
text-decoration:underline;
}
#right a:hover{
color:#ffffff;
text-decoration:underline;
}
#right a:active{
color:black;
}
#food ul,#lift ul{
list-style:none;
padding:0px 0px 10px 0px;
margin:10px 10px 0px 10px;
}
#food ul li,#lift ul li{
background-image:url("../image/icon1.gif");
background-repeat:no-repeat;
background-position:3px 9px;
padding:3px 0px 3px 12px;
border-bottom:1px dashed #EEEEEE;
}
#food a:link ,#food a:visited{
color:#004ab7;
text-decoration:underline;
}
#food a:hover{
color:#000000;
text-decoration:underline;
}
#food a:active{
color:black;
}
#lift a:link ,#lift a:visited{
color:#004ab7;
text-decoration:underline;
}
#lift a:hover{
color:#000000;
text-decoration:underline;
}
#lift a:active{
color:black;
}
#footer{
background-color:#ffffff;
margin:1px 0px;
clear:both;
position:relative;
padding:1px 0px;
}
#footer p{
text-align:center;
padding:0px;
margin:4px 5px;
background-color:#5ea6eb;
}
#footer p a{
color:#ffffff;
text-decoration:none;
}
这段时间试着总结自己的“代码大全”,把不理解的和经典的代码段整理出来,积累久了肯定的、能大大的提高工作效率,有写常用的东西还可以封装起来,用的时候拿过来用就好了(比如像SQLHelper一类的)。