用html实现满屋花的网页
最新推荐文章于 2024-05-24 12:48:08 发布
qq_45411328
最新推荐文章于 2024-05-24 12:48:08 发布
阅读量1.3w
收藏
85
点赞数
26
最新推荐文章于 2024-05-24 12:48:08 发布
阅读量1.3w
收藏
85
点赞数
26
需要完成的样式
模仿完成的样式
思路分析
设置一个大的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元素浮动和定位（相对定位）的知识也对别的很多元素有了更深入的理解。
2915
暂无认证
到【灌水乐园】发言
qq_45411328: 源码就在上面，如果有这方面疑问，可以copy下来跑一跑，将循环里那个if不写在第二个位置试一下~~
m0_52484211: 这个写的答案是有问题的，如果第一个添加的元素序号大于第二个添加的元素，第二个添加的元素会排在第一个元素的后面的
Java$jt: 写的很牛，膜拜大佬
�ʚɞ: 请问为什么循环里那个if一定要写在第二个位置呢?
元气少女帕吉:
很不错的文章，学到东西了！