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;}

地址

链接: 百度网盘.
提取码：dggi

ps：可能有一些代码与大神，如果侵犯，请联系我。

HTML+CSS 满屋花相关推荐

网页编程（满屋花、金山打字、打地鼠）——张渣渣_的学习记录（4）
张渣渣_的学习记录(4)--网页编程(满屋花.金山打字.打地鼠) 满屋花金山打字打地鼠满屋花效果图如下: (需要素材的话可以dd我) <!DOCTYPE HTML> <htm ...
用html实现满屋花的网页
需要完成的样式模仿完成的样式思路分析设置一个大的div背景设置为pink 主题分为上下两部分上部分:图片和导航下部分:分为左右左:ul和li 右分为四部分实验代码 html <!D ...
html满屋花项目,几款花卉，花姿妖娆，花开香飘溢满屋，真的太美了
沙漠玫瑰不仅是新人花,也是懒人花,沙漠玫瑰花形似小喇叭,玫瑰红色,非常艳丽.伞形花序三五成丛,灿烂似锦,四季开花不断.能在沙漠地区生长的沙漠玫瑰,说明非常耐干旱,水分越少反而生长越健康,所以在家里养上 ...
满屋花网页代码_成为更好的程序猿！2020年给网页开发人员的32条建议
全文共3315字,预计学习时长10分钟来源:Pexels 2019年已经过去了,对开发人员来说是充满挑战和机遇的一年.开发人员们学习和掌握了很多--像React.Vue.Angular和Svelte ...
程序员网购18年不拆快递！意外离世后满屋快递被拆开，价值3500万！
请点击上面一键关注! 快来围观这满屋的快递,天呐,这么多,第一次看这照片,怀疑自己走错了片场,来到了快递站点,后来才知道,这真的,竟然,是一个程序员的家! 这位程序员买了18年的快递,堆的到处都是, ...
满屋研选获1亿元B轮融资，华创资本领投，五岳资本、金地集团、治平资本等跟投...
12月17日消息,近日,家居新零售平台满屋研选对外宣布获得1亿元人民币B轮系列融资,本轮融资由华创资本领投,五岳资本.金地集团.治平资本等知名投资机构及上市地产名企跟投.在完成本轮融资后,满屋研选将加 ...
这家刷脸入住的酒店，满屋都是黑科技
之前有"无人零售"."无人工厂",现在无人化的概念也被运用到了酒店行业中. 在"无人酒店"里,入住.退房不需要在前台耗费大量时间,只需要在自 ...
满屋研选获1亿元B轮融资，华创资本领投，五岳资本、金地集团、治平资本等跟投... 1
12月17日消息,近日,家居新零售平台满屋研选对外宣布获得1亿元人民币B轮系列融资,本轮融资由华创资本领投,五岳资本.金地集团.治平资本等知名投资机构及上市地产名企跟投.在完成本轮融资后,满屋研选将加 ...
用css做（花的绽放）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

HTML+CSS 满屋花

HTML+CSS满屋花制作

HTML代码

CSS代码

地址

HTML+CSS 满屋花相关推荐

最新文章

热门文章