用html实现满屋花的网页

百科大全

更新时间：2025-10-05 21:15:2437

admin管理员组
文章数量:1794759

用html实现满屋花的网页

需要完成的样式模仿完成的样式思路分析设置一个大的div背景设置为pink 主题分为上下两部分上部分：图片和导航下部分：分为左右左：ul和li 右分为四部分实验代码 html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/mwh.css"> </head> <body> <div class="body"> <div class="main"> <header> <img src="./imgs/banner.jpg" alt=""> <nav> <ul> <a href="#"> <li class="c1">鲜花礼品</li> </a> <a href="#"> <li>自助订花</li> </a> <a href="#"> <li>绿色植物</li> </a> <a href="#"> <li>花之物语</li> </a> <a href="#"> <li>会员中心</li> </a> <a href="#"> <li>联系我们</li> </a> <a href="#"> <li>支付方式</li> </a> </ul> </nav> </header> <div class="main"> <div class="main-lf"> <img src="./imgs/login.jpg" alt=""> <input type="text" placeholder="用户" class="c2"> <input type="text" placeholder="密码" class="c2"> <input type="submit" value="登录" class="c3"> <input type="submit" value="注册" class="c3"> <a href="#" style="font-size:x-small; position: relative; left: 30px;">忘记密码</a> <img src="./imgs/category.jpg" alt=""> <div class="c4">用途</div> <ul> <a href="#"> <li> <div class="c5"></div><span>·</span>爱情鲜花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>生日送花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>新年鲜花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>家庭用花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>亲情用花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>道歉鲜花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>开业花篮</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>会议用花</li> </a> </ul> <div class="c4" style="position: relative;top: -15px;">花材</div> <ul style="position: relative;top: -15px;"> <a href="#"> <li> <div class="c5"></div><span>·</span>玫瑰花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>百合花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>郁金香</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>太阳花</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>康乃馨</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>马蹄莲</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>扶郎</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>剑兰</li> </a> </ul> <div class="c4" style="position: relative;top: -30px;">价格</div> <ul style="position: relative;top: -30px;"> <a href="#"> <li> <div class="c5"></div><span>·</span>100~200元</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>200~300元</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>300~400元</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>400~500元</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>500~600元</li> </a> <a href="#"> <li> <div class="c5"></div><span>·</span>800元以上</li> </a> </ul> </div> <div class="main-rt"> <div class="rt1"> <div class="rt1-header"></div> <div class="rt1-body"> <a href="#"> <div class="rt1-body1"> <img src="./imgs/new1.jpg" alt=""></div> </a> <a href="#"> <div class="rt1-body1"> <img src="./imgs/new2.jpg" alt=""></div> </a> <a href="#"> <div class="rt1-body1"> <img src="./imgs/new3.jpg" alt=""></div> </a> </div> </div> <div class="rt2"> <div class="rt2-header"> </div> <div class="rt2-body"> <div class="body1"> <a href="#"> <img src="./imgs/flower1.jpg" alt="" style="position: relative; left: 11.5px;"> <p>幸福的味道</p> <p>￥288元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower2.jpg" alt="" style="position: relative; left: 11.5px;"> <p>阳光守护你</p> <p>￥300元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower3.jpg" alt="" style="position: relative; left: 11.5px;"> <p>温情永远</p> <p>￥268元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower4.jpg" alt="" style="position: relative; left: 11.5px;"> <p>爱无界</p> <p>￥318元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower5.jpg" alt="" style="position: relative; left: 11.5px;"> <p>亲亲宝贝</p> <p>￥368元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower6.jpg" alt="" style="position: relative; left: 11.5px;"> <p>相信是缘</p> <p>￥188元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower7.jpg" alt="" style="position: relative; left: 11.5px;"> <p>水晶童话</p> <p>￥198元</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower8.jpg" alt="" style="position: relative; left: 11.5px;"> <p天使之爱</p> <p>￥168元</p> </a> </div> </div> </div> <div style="clear: both;"></div> <div class="rt3"> <div class="rt3-header"> </div> <div class="rt3-body"> <div class="body1"> <a href="#"> <img src="./imgs/flower9.jpg" alt="" style="position: relative; left: 11.5px;"> <p>粉色迷情</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower10.jpg" alt="" style="position: relative; left: 11.5px;"> <p>海岸的优雅</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower11.jpg" alt="" style="position: relative; left: 11.5px;"> <p>百年地中海</p> </a> </div> <div class="body1"> <a href="#"> <img src="./imgs/flower12.jpg" alt="" style="position: relative; left: 11.5px;"> <p>爱要说出口</p> </a> </div> </div> </div> <div style="clear: both;"></div> <footer> <div class="footer-header"></div> <div class="footer-body"> <div class="fl"> <ul> <a href=""> <li>各种鲜花所代表的含义</li> </a> <a href=""> <li>养花与养生之道</li> </a> <a href=""> <li>花香的味道</li> </a> <a href=""> <li>种花与送花</li> </a> </ul> </div> <div class="fl"> <ul> <a href=""> <li>花的喜怒哀乐与人的各种感觉</li> </a> <a href=""> <li>每天清晨的第一缕阳光</li> </a> <a href=""> <li>世界各地关于送花的习俗</li> </a> <a href=""> <li>手捧一束鲜花的等待</li> </a> </ul> </div> </div> </footer> </div> </div> </body> </html>

css

.body { width: 100%; min-height: 1000px; background-color: pink; margin: auto; } .main { width: 700px; margin: auto; } header img { display: block; } nav { width: 800px; height: 30px; margin: auto; line-height: 30px; position: relative; left: -40px; text-align: center; margin-top: -16px; } header li { display: block; background-image: url("../imgs/button1.jpg"); list-style: none; width: 98px; float: left; padding: 0; margin-left: 0; border: 1px solid white; } nav a, .main-lf a { color: black; text-decoration: none; } nav li:hover { background-image: url("../imgs/button1_bg.jpg"); } a:active { color: #f40; } .main { margin-top: 3px; width: 700px; height: 100%; margin: auto; } .main-lf { width: 180px; height: 700px; background-color: white; float: left; border-radius: 10px; } .main-lf .c2 { display: block; width: 140px; margin: auto; } .main-lf .c3 { display: inline-block; width: 35px; height: 21px; font-size: x-small; padding-left: 3px; position: relative; left: 16px; } .c4 { width: 150px; height: 20px; background-color: pink; margin: auto; font-weight: 900; } .main-lf li { width: 150px; border-bottom: 1px dashed rgb(181, 185, 187); font-size: x-small; font-weight: 600; padding-left: 5px; list-style: none; position: relative; left: -28px; top: -7px; } span { color: red; position: relative; left: -10px; } .c5 { display: inline-block; width: 6px; height: 6px; border: 2px solid red; position: relative; left: -3px; top: 0px; } .main-rt { width: 518px; height: 800px; border-radius: 10px; float: left; top: 3px; position: relative; left: 2px; background-color: pink; } .rt1 { width: 100%; min-height: 35px; background-color: white; } .rt1-header { width: 100%; min-height: 35px; background-image: url("../imgs/latest.jpg"); background-repeat: no-repeat; } .rt1-body { width: 100%; height: 107px; } .rt1-body1 { margin: 1.32px; float: left; } .rt2 { width: 100%; min-height: 35px; margin-top: 4px; background-color: white; } .rt2-header { margin-top: 3px; width: 100%; min-height: 35px; background-image: url("../imgs/recommend.jpg"); background-repeat: no-repeat; } .body1 { width: 129px; float: left; height: 143px; background-color: white; } p { color: black; margin-top: 3px; text-align: center; height: 3px; line-height: 3px; font-size: 0.75em; } a { text-decoration: none; } p:active { color: #f40; } .rt3-header { width: 100%; min-height: 35px; background-image: url("../imgs/new.jpg"); background-repeat: no-repeat; } .rt3 { width: 100%; min-height: 35px; margin-top: 4px; background-color: white; } .body1 { float: left; } .footer-header { width: 100%; min-height: 35px; background-image: url("../imgs/tips.jpg"); background-repeat: no-repeat; } footer { width: 100%; height: 151px; margin-top: 4px; background-color: white; } .fl { width: 50%; float: left; background-color: white; } footer a { list-style-image: url("../imgs/icon2.gif"); font-size: 1em; font-weight: 700; color: black; }

实现步骤根据需要完成的样子将网页分为几个大部分，然后根据几个大部分的需要将大部分分为小部分，一个一个完成最后需要浮动的地方浮动需要定位的地方定位。需要导入图片的地方导入图片剩下就是慢慢调整边距和页面大小。具体说说对这个块的实现我第一次实现这个块的时候将他设置为上下两部分然后上部分分为四个小块下部分分为四个小块，最后弄得很乱（由于这里面div包裹着div然后会有8个块是一模一样的需要复制粘贴很容易弄得不知道那个div包裹着那个显的页面代码很乱）。结果我的代码全部乱了，我不得不重新写这块代码。后面我重新思考了一下，发现没必要分为上下两部分。其实只要把整个大的div块的宽度设置好，然后里面包裹着八个图片（需要使图片和文字居中）的div最后浮动就可以完成上面的效果了。总结虽然花满屋的页面实现起来没什么技术难点全部使用的是html+css最基础的知识，但是这个页面实现对于像我这样的新手来说是很友好的，经过这次页面的实现，我复习了许多关于div元素浮动和定位（相对定位）的知识也对别的很多元素有了更深入的理解。

本文标签：满屋网页 html

版权声明：本文标题：用html实现满屋花的网页内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686813683a106153.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。