Styles to be completed
Imitate the completed style
Train of thought analysis
Set a large div background to pink
The topic is divided into two parts
Upper part: pictures and navigation
Lower part: divided into left and right parts
Left: ul and li
The right is divided into four parts
Experiment code
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">Flower gifts</li>
</a>
<a href="#">
<li>Self service flower ordering</li>
</a>
<a href="#">
<li>Green plants</li>
</a>
<a href="#">
<li>Flower Words </li>
</a>
<a href="#">
<li>Membership Center</li>
</a>
<a href="#">
<li>contact us</li>
</a>
<a href="#">
<li>Payment method</li>
</a>
</ul>
</nav>
</header>
<div class="main">
<div class="main-lf">
<img src="./imgs/login.jpg" alt="">
<input type="text" placeholder="user" class="c2">
<input type="text" placeholder="password" class="c2">
<input type="submit" value="Login" class="c3">
<input type="submit" value="register" class="c3">
<a href="#"Style=" font size: X-Small; Position: relative; Left: 30px; "> forgot password</a>
<img src="./imgs/category.jpg" alt="">
<div class="c4">purpose</div>
<ul>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Love flowers</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Flowers for birthday</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>New Year flowers</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Household flower</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Family flower</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Apology flowers</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Opening flower basket</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Meeting flowers</li>
</a>
</ul>
<div class="c4" style="position: relative;top: -15px;">Flower wood</div>
<ul style="position: relative;top: -15px;">
<a href="#">
<li>
<div class="c5"></div><span>·</span>Rose</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Lily</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>tulip</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Sunflower</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Carnation</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Calla Lily</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Fulang</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>Gladiolus</li>
</a>
</ul>
<div class="c4" style="position: relative;top: -30px;">price</div>
<ul style="position: relative;top: -30px;">
<a href="#">
<li>
<div class="c5"></div><span>·</span>100~200 element</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>200~300 element</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>300~400 element</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>400~500 element</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>500~600 element</li>
</a>
<a href="#">
<li>
<div class="c5"></div><span>·</span>800 Above yuan</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>The taste of happiness</p>
<p>￥288 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower2.jpg" alt="" style="position: relative; left: 11.5px;">
<p>The sun protects you</p>
<p>￥300 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower3.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Warmth forever</p>
<p>￥268 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower4.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Boundless love</p>
<p>￥318 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower5.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Kiss baby</p>
<p>￥368 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower6.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Believe is fate</p>
<p>￥188 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower7.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Crystal Fairy Tale</p>
<p>￥198 element</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower8.jpg" alt="" style="position: relative; left: 11.5px;">
<p Angel love</p>
<p>￥168 element</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>Pink fascination</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower10.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Elegance of the coast</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower11.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Centennial Mediterranean</p>
</a>
</div>
<div class="body1">
<a href="#">
<img src="./imgs/flower12.jpg" alt="" style="position: relative; left: 11.5px;">
<p>Love to say</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>The meaning of various flowers</li>
</a>
<a href="">
<li>Raising flowers and the way to keep healthy</li>
</a>
<a href="">
<li>The smell of flowers</li>
</a>
<a href="">
<li>Planting and sending flowers</li>
</a>
</ul>
</div>
<div class="fl">
<ul>
<a href="">
<li>The joys and sorrows of flowers and people's feelings</li>
</a>
<a href="">
<li>The first ray of sunshine every morning</li>
</a>
<a href="">
<li>The custom of sending flowers around the world</li>
</a>
<a href="">
<li>Waiting with a bunch of flowers in hand</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;
}
Implementation steps
The web page is divided into several major parts according to the appearance to be completed, and then the major parts are divided into small parts according to the needs of several major parts, one by one to complete the positioning of the final floating places. Where you need to import pictures, the rest is to slowly adjust the margins and page size.
Let's talk about the implementation of this block
When I implemented this block for the first time, I set it as an upper and lower part, and then the upper part was divided into four small blocks, and the lower part was divided into four small blocks. Finally, it was very messy (because the div is wrapped in the div, and then there are eight blocks that are identical and need to be copied and pasted. It is easy to make it difficult to know which div is wrapped in the explicit page code, which is very messy). As a result, my code was all messed up and I had to rewrite it. Later, I reconsidered and found that there was no need to divide it into upper and lower parts. In fact, as long as the width of the entire large div block is set, and then the div containing eight pictures (the picture and text need to be centered) finally floats, the above effect can be completed.
summary
Although there are no technical difficulties in the implementation of the page full of flowers, all of which use the most basic knowledge of html+css, this page implementation is very friendly to novices like me. After the implementation of this page, I reviewed a lot of knowledge about div element floating and positioning (relative positioning) and had a deeper understanding of many other elements.