CSS+DIV实例——鲜花店

来源：互联网发布：flash 触摸源码下载编辑：程序博客网时间：2024/04/28 16:53

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(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，很强大，实现了页面内容和样式的分离。按捺不住下，按着教程，做了这个鲜花店的实例。

1 0