CSS+DIV练手――出游网站 _HTML/CSS

CSS+DIV练手――旅游网站

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一类的）。

2楼lfmilaoshi前天 21:12: 积累，点点滴滴n没事了

1楼lishehe4天前 21:02: 这方面知识有意思，呵呵