首页 > 分享 > HTML+CSS 满屋花

HTML+CSS 满屋花

花匠小妙招
2024-10-30 01:59

HTML+CSS满屋花制作

在这里插入图片描述
ps:logo上面还有，只不过屏幕小而已。

在这里插入图片描述

HTML代码

<!DOCTYPE HTML> <html><head><meta charset="utf-8"> <title>满屋花</title> <link type="text/css" rel="stylesheet" href="css/index.css"> </head> <body><div class="qb"><div class="top"><div class="logo"><img src="img/banner.jpg" alt="logo"> </div> <div class="dbdhl"><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 class="left"><div class="dl"><form> <p class="dlym"> 用户:<input type="text" class="text"><br> 密码:<input type="password" class="text"><br> </p> <p class="dlan"> <input type="button" value="登录" class="an"/> <input type="button" value="注册" class="an"/> <a href="#">忘记密码</a> </p> </form> </div> <div class="xhfl"> <div class="yt"> <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> </ul> </div> <div class="hc"> <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> </ul> </div> <div class="jg"> <h4><span>价格</span></h4> <ul> <li><a href="#">100~200元</a></li> <li><a href="#">200~300元</a></li> <li><a href="#">300~400元</a></li> <li><a href="#">400~500元</a></li> <li><a href="#">500~600元</a></li> <li><a href="#">600~800元</a></li> <li><a href="#">800元以上</a></li> </ul> </div> <div class="kg"><img src="img/leftbottom.jpg"></div> </div> </div> <div class="right"><div class="bzkx"></div> <div class="bzkx_tp"><ul><li><a href="#"><img src="img/new1.jpg" alt="新品上市"></a></li> <li><a href="#"><img src="img/new2.jpg" alt="大酬宾"></a></li> <li><a href="#"><img src="img/new3.jpg" alt="超值优惠"></a></li> </ul> </div> <div class="xhtj"> <ul><li><img src="img/flower1.jpg" alt="幸福的味道"><br /><a href="#">幸福的味道</a>¥ 288元</li> <li><img src="img/flower2.jpg" alt="阳光守护你"><br /><a href="#">阳光守护你</a>¥ 300元</li> <li><img src="img/flower3.jpg" alt="温情永远"><br /><a href="#">温情永远</a>¥ 268元</li> <li><img src="img/flower4.jpg" alt="爱无界"><br /><a href="#">爱无界</a>¥ 318元</li> <li><img src="img/flower5.jpg" alt="亲亲宝贝"><br /><a href="#">亲亲宝贝</a>¥ 368元</li> <li><img src="img/flower6.jpg" alt="相信是绿"><br /><a href="#">相信是绿</a>¥ 188元</li> <li><img src="img/flower7.jpg" alt="水晶童话"><br /><a href="#">水晶童话</a>¥ 198元</li> <li><img src="img/flower8.jpg" alt="天使之爱"><br /><a href="#">天使之爱</a>¥ 268元</li> </ul> </div> <div class="xpss"> <ul><li><img src="img/flower9.jpg" alt="粉色迷情"><br /><a href="#">粉色迷情</a></li> <li><img src="img/flower10.jpg" alt="海岸的优雅"><br /><a href="#">海岸的优雅</a></li> <li><img src="img/flower11.jpg" alt="百年地中海"><br /><a href="#">百年地中海</a></li> <li><img src="img/flower12.jpg" alt="爱要说出口"><br /><a href="#">爱要说出口</a></li> </ul> </div> <div class="xhdg"> <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> </ul> </div> </div> </div> </body> </html>

CSS代码

/*********************************** QuKin 提示： .dbdhl：顶部导航栏 .left：左边导航栏 .right：右边导航栏 .dl：用户登录 .xhfl：鲜花分类 .bzkx：本站快讯 .xpss：新品上市 .xhdg：鲜花导购 ***********************************/ /*全局变量*/ *{margin:0px;padding:0px; } body{margin:0 auto;width:700px;background-color:#ffd8d9; } ul{list-style:none; } a{display:block;text-decoration:none;color:#000; } h4{background-color:pink;padding:3px 0px 1px 5px;margin:0px 18px;font-size:12px; } .clear{clear:both; }/*顶部导航栏*/.dbdhl li{display:inline-block;font-size:15px;width:75px;padding-right:20px;}.dbdhl a{background:url(../img/button1.jpg) no-repeat;width:100px;height:30px;text-align:center;padding-top:7px;font-size:12px;}.dbdhl a:hover{color:#FFF;background:url(../img/button1_bg.jpg) no-repeat;text-decoration:underline;}/*左边导航栏*/.left{background-color:#fff;width:180px;float:left;margin-top:0px;}.zbdhl ul{margin:0px;padding:5px 0px 0px 25px;}/*登录*/.dl{padding:40px 0px 10px 0px;background:url(../img/login.jpg) no-repeat;}.dl a{font-size:10px;display:inline-block;}.dlym{ /*登录用户名和密码*/margin:1px;text-align:left;padding:20px 0px 0px 25px;font-size:13px;}.dlan{ /*登录按钮一排*/text-align:left;font-size:13px;padding:5px 0px 0px 25px;}.dl form input.text{border:1px solid black;border-left:none;border-top:none;border-right:none;padding:0px;width:90px;}.dl form input.an{border:1px solid black;height:18px;padding:0px;background-color:#fff1f1;}.dl a:hover{color:#666;text-decoration:underline;}/*鲜花分类*/.xhfl{background:url(../img/category.jpg) no-repeat;padding-top:50px;font-size:13px;}.xhfl ul{padding:5px 22px 15px 22px;}.xhfl ul li{padding:1px 0px 1px 15px;border-bottom:1px dashed black;background:url(../img/icon1.gif) no-repeat 5px 10px;}.xhfl a:hover{color:#666;text-decoration:underline;}.kg{margin-top:16px;margin-bottom:-3px;}/*右边导航栏*/.right{float:left;width:518px;margin-left:1px;font-size:12px;}/*本站快讯*/.bzkx{background:url(../img/latest.jpg) no-repeat;padding-top:33px;margin:1px 0px 1px 0px;}.bzkx_tp ul li{display:inline-block;}.bzkx_tp img{border:none;padding-left:0px;width:170px;}/*鲜花推荐*/.xhtj{background:url(../img/recommend.jpg) no-repeat;padding-top:33px;margin:5px 0px 3px 0px;background-color:#FFF;}.xhtj ul,.xpss ul{margin:0px;padding:6px 5px 5px 8px;}.xhtj ul li,.xpss ul li{text-align:center;display:inline-block;width:115px;}.xhtj ul li img,.xpss ul li img{border:none;margin:5px 0px 3px 0px;padding:0px;}.xhtj a,.xpss a{color:#999;}.xhtj a:hover{color:red;text-decoration:underline;}/*新品上市*/.xpss{background:url(../img/new.jpg) no-repeat;padding-top:33px;margin:6px 0px 0px 0px;background-color:#FFF;}.xpss a:hover{color:red;text-decoration:underline;}/*鲜花导购*/.xhdg{background:url(../img/tips.jpg) no-repeat;padding-top:33px;margin:5px 0px 10px 0px;background-color:#FFF;}.xhdg ul{margin:0px;padding:5px 5px 5px 30px;}.xhdg ul li{padding:1px 0px 1px 12px;display:inline-block;width:200px;background:url(../img/icon2.gif) no-repeat 5px 5px;}.xhdg a:hover{color:red;text-decoration:underline;}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216