CSS+DIV实例——鲜花店

最新推荐文章于 2025-09-09 15:36:13 发布

原创最新推荐文章于 2025-09-09 15:36:13 发布 · 1.5w 阅读

103 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

该博客介绍了如何利用CSS+DIV布局技术来设计一个鲜花店的网页。通过这个实例，展示了如何将内容与表现分离，实现更灵活的网页布局。

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

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

页面截图：

html代码：

<html>
	<head>
		<title>鲜花满屋</title>
		<link href="鲜花.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div id="container">
			<div id="banner"><img src="banner.jpg"></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>						
				</ul>			
			</div>
			<div id="left">
				<div id="login">
					<form>
						<p>用户：<input type="text" class="text"></p>
						<p>密码：<input type="text" class="text"></input></p>
						<p><input type="button" class="btn" value="登录"></input><input type="button" class="btn" value="注册"> </input></p>
					</form>
				</div>
				<div id="category">
					<h4><span>用途</span></h4>
					<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>				
					</ul>
					<h4><span>花材</span></h4>
						<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>
						</ul>
					<h4><span>价格</span></h4>
						<ul>
							<li><a href="#">100元以下</a></li>
							<li><a href="#">100-200元</a></li>
							<li><a href="#">200-300元</a></li>
							<li><a href="#">300元以上</a></li>
						</ul>
				</div>
			</div>
			<div id="main">
				<div id="latest"><a href="#"><img src="new1.jpg"></a><a href="#"><img src="new2.jpg"></a><a href="#"><img 
				src="new3.jpg"></a></div>
				<div id="recommend">
					<ul>
						<li><a href="#"><img src="flower1.jpg"><br>幸福的味道</a><br>￥288元></li>
						<li><a href="#"><img src="flower2.jpg"><br>阳光守护你</a><br>￥300元</li>
						<li><a href="#"><img src="flower3.jpg"><br>温情永远</a><br>￥300元</li>
						<li><a href="#"><img src="flower4.jpg"><br>爱无界</a><br>￥288元></li>
						<li><a href="#"><img src="flower5.jpg"><br>亲亲宝贝</a><br>￥300元</li>
						<li><a href="#"><img src="flower6.jpg"><br>相信是缘</a><br>￥300元</li>
						<li><a href="#"><img src="flower7.jpg"><br>水晶童话</a><br>￥288元></li>
						<li><a href="#"><img src="flower8.jpg"><br>天使之爱</a><br>￥300元</li>
					</ul>
					<br>
				</div>
				<div id="new">
					<ul>
						<li><a href="#"><img src="flower9.jpg"><br>粉色迷情</a></li>
						<li><a href="#"><img src="flower10.jpg"><br>海岸的优雅</a></li>
						<li><a href="#"><img src="flower11.jpg"><br>百年地中海</a></li>
						<li><a href="#"><img src="flower12.jpg"><br>爱要说出口</a></li>
					</ul>
					<br>
				</div>
				<div id="tips">
					<ul>
						<li><a href="">各种鲜花所代表的含义</a></li>
						<li><a href="">花的喜怒哀乐与人的各种感觉</li>
						<li><a href="">养花与养生之道</li>
						<li><a href="">每天清晨的第一缕阳光</li>
						<li><a href="">花香的味道</li>
						<li><a href="">世界各地关于送花的习俗</li>
						<li><a href="">手捧一束鲜花的等待</li>
					</ul>
					<br>
				</div>
			</div>
			
		</div>
	</body>
</html>

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(https://blog.csdn.net/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(https://blog.csdn.net/button1_bg.jpg) no-repeat;
}
 #left{
	width:180px;
	float:left;
	background:#ffffff url(https://blog.csdn.net/leftbottom.jpg) no-repeat bottom;
	margin:1px 0px 0px 0px;
 }
 #login{
	background:url(https://blog.csdn.net/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(https://blog.csdn.net/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(https://blog.csdn.net/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(https://blog.csdn.net/latest.jpg) no-repeat;
	padding:35px 0px 0px 0px;
 }
 #latest img{
	border:none;
	padding-left:1px;
 }
 #recommend{
	background:url(https://blog.csdn.net/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(https://blog.csdn.net/new.jpg) no-repeat;
	margin:5px  0px 0px 0px;
	padding:35px 0px 0px 0px;
	background-color:#ffffff;
 }
 #tips{
	background:url(https://blog.csdn.net/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(https://blog.csdn.net/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，很强大，实现了页面内容和样式的分离。按捺不住下，按着教程，做了这个鲜花店的实例。

标签

#CSS