CSS+DIV实例——鲜花店

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

在之前介绍过理论的基础上，做如下鲜花店的实例：

页面截图：

html代码：

	
		
		
	
	
		

			

			

				

					
红玫瑰
					
粉玫瑰
					
白玫瑰
					
香槟玫瑰
					
蓝色妖姬
					
百合花
	
					
康乃馨
						
				
			
			
			

				

					

						
用户：
						
密码：
						
 
					
				
				

					
用途
					

						
爱情鲜花
						
生日送花
						
新年鲜花
						
家庭用花
						
亲情用花
						
道歉鲜花
						
探望/祝福
						
开业/商务
						
婚礼/婚庆
				
					
					
花材
						

							
红玫瑰
							
粉玫瑰
							
组合花
							
白玫瑰
							
蓝玫瑰
							
鲜花礼盒
							
巧克力花束
							
花篮类
							
鲜花蛋糕组合
						
					
价格
						

							
100元以下
							
100-200元
							
200-300元
							
300元以上
						
				
			
			

				

				

					

						

幸福的味道
￥288元>
						

阳光守护你
￥300元
						

温情永远
￥300元
						

爱无界
￥288元>
						

亲亲宝贝
￥300元
						

相信是缘
￥300元
						

水晶童话
￥288元>
						

天使之爱
￥300元
					
					

				
				

					

						

粉色迷情
						

海岸的优雅
						

百年地中海
						

爱要说出口
					
					

				
				

					

						
各种鲜花所代表的含义
						
花的喜怒哀乐与人的各种感觉

						
养花与养生之道

						
每天清晨的第一缕阳光

						
花香的味道

						
世界各地关于送花的习俗

						
手捧一束鲜花的等待

					

					

				

			

			
		

	

CSS样式：

body{
	background-color: #ffd8d9;
	margin:1px 0px 0px 0px;
	padding:0px;
	text-align:center;
	font-size:12px;
	font-family:Arial,Helvetica,sans-serif;
}
#container{
	position:relative;
	margin:0px auto 0px auto;
	width:700px;
	text-align:left;
}
#globallink{
	margin:0px; 
	padding:0px;
}

#globallink ul{
	list-style:none;
	padding:0px;
	margin:0px;
}
#globallink li{
	float:left;
	text-align:center;
	width:100px;
}
#globallink a{
	display:block;
	padding:9px 6px 11px 6px;
	background:url(button1.jpg) no-repeat;
	margin:0px;
}
#globallink a:link,#globallink a:visited{
	color:#630002;
	text-decoration:none;
}
globallink a:hover{
	color:#ffffff;
	text-decoration:underline;
	background:url(button1_bg.jpg) no-repeat;
}
 #left{
	width:180px;
	float:left;
	background:#ffffff url(leftbottom.jpg) no-repeat bottom;
	margin:1px 0px 0px 0px;
 }
 #login{
	background:url(login.jpg) no-repeat;
	padding:55px 0px 10px 0px;
 }
 #login form{
	padding:0px;
	margin:0px;
 }
 #login p{
	margin:0px;
	text-align:left;
	padding:5px 0px 0px 25px;
 }
 #login p input{
	font-family:Arial,Helvetica, sans-serif;
	font-size:12px;
 }
 #login form input.text{
	border-bottom:1px solid #000000;
	border-left:none;border-right:none;
	border-top:none;
	padding:0px;width:90px;
 }
 #login form input.btn{
	border:1px solid #000000;
	background-color:#ffeff0;
	height:17px;
	padding:0px;
 }
 #login p a:link,#login p a:visited{
	color:#333333;
	text-decoration:none;
 }
 #login p a:hover{
	color:#000088;
	texe-decoration:underline;
 }
 
 #category{
	background:url(category.jpg) no-repeat;
	padding:55px 0px 40px 0px;
 }
 
 #category h4{
	margin:0px 18px 0px 18px;
	padding:3px 0px 1px 5px;
	background-color : #ffd1d1;
	font-size:12px;
 }
 #category ul{
	list-style:none;
	margin:0px;
	padding:5px 22px 15px 22px;
 }
 
 #category  ul li{
		padding:2px 0px 2px 16px;
		border-bottom:1px dashed #999999;
		background:url(icon1.gif) no-repeat 5px 7px;
 }
 
 #category ul li a:link , #category ul li a:visited{
	color:#000000;
	text-decoration:none;
 }
 #category ul li a:hover{
	color:#666666;
	text-decoration:underline;
 }
 #main{
	float:left;
	width:518px;
	margin:1px 0px 0px 2px;
 }
 #latest{
	background:url(latest.jpg) no-repeat;
	padding:35px 0px 0px 0px;
 }
 #latest img{
	border:none;
	padding-left:1px;
 }
 #recommend{
	background:url(recommend.jpg) no-repeat;
	margin:5px 0px 0px 0px;
	padding:35px 0px 0px 0px;
	background-color:#ffffff;
 }
 #recommend br , #new br,#tips br{
	display:block;
	clear:both;
	margin:0px;
	padding:0px;
 }
 #recommend ul , #new ul{
	list-style:none;
	margin:0px;
	padding:5px 5px 5px 8px;
 }
 #recommend ul li , #new ul li{
	text-align:center;
	float:left;
	width:125px;
 }
 #recommend ul li img , #new ul li img{
	border:none;
	margin:5px 0px 3px 0px;
	padding:0px;
 }
 #recommend ul li a:link , #recommend ul li a:visited , #new ul li a:link,#new ul li a:visited{
	color:#666666;
	text-decoration:none;
 }
 #recommend ul li a:hover , #new ul li a:hover{
	color:#d20005;
	text-decoration:underline;
 }
 #new{
	background:url(new.jpg) no-repeat;
	margin:5px  0px 0px 0px;
	padding:35px 0px 0px 0px;
	background-color:#ffffff;
 }
 #tips{
	background:url(tips.jpg) no-repeat;
	margin:5px 0px 0px 0px;
	padding:35px 0px 0px 0px;
	background-color:#ffffff;
 }
 #tips ul{
	list-style:none;
	margin:0px;
	padding:5px 5px 5px 30px;
 }
 #tips ul li{
	background:url(icon2.gif) no-repeat 5px 6px;
	padding:1px 0px 1px 12px;
	float:left;
	width:220px;
 }
 #tips ul li a:link,#tips ul li a:visited{
	color:#222222;
	text-decoration:none;
 }
 #tips ul li a:hover{
	color:#d20005;
	text-decoration:underline;
 }

前两天在学习CSS+DIV。在之前的资料、现在的项目中，一直再使用CSS样式，DIV布局，多少有些糊涂。虽然这个视频很简短，很浓缩，不过对之前的学习是很好的一个总结，对CSS+DIV的理解明朗了不少。也觉得CSS+DIV，很强大，实现了页面内容和样式的分离。按捺不住下，按着教程，做了这个鲜花店的实例。