Display effect ：
Make the head ：
html
<header> <ul> <li class="logo"><img src="images/logo.jpg"></li> <li><a
href="#"> Wear Express </a> </li> <li><a href="#"> Wear Express </a> </li> <li><a href="#"> Wear Express </a>
</li> <li><a href="#"> Wear Express </a> </li> <li><a href="#"> Wear Express </a> </li> <li><a
href="#"> Wear Express </a> </li> </ul> </header>
css
*{ margin: 0px; padding: 0px; } header{ width: 980px; height: 70px;
background-color: antiquewhite; border-bottom: 3px solid pink; margin: 0 auto;
} header ul{ width: 980px; margin: 0 auto; list-style-type: none;/* Remove the ·*/ }
header li{ float: left; } header ul img{ width: 135px; height: 100px;
margin-right: 40px; margin-left: -10px; border-radius: 50px; } header li a{
display: inline-block; height: 70px; text-decoration: none;/* Remove underline */
line-height: 70px; width: 120px; text-align: center; color: hotpink; } header
li a:hover{ color: darkorange; font-size: 20px; }
Then there is a picture ：
Production content ：
html:
<div class="content"> <div class="banner"><img src="images/banner.jpg"></div>
<div class="style_bg"> <div class="style"> <dl> <dt class="left1"></dt><dd
class="left2"><a href="#"> Star style </a> </dd> <dt class="left3"></dt><dd
class="left4"><a href="#"> Fashion Blogger </a> </dd> </dl> <dl> <dt
class="center1"></dt><dd class="center2"><a href="#"> Popular collocation </a></dd> <dt
class="center3"></dt><dd class="center4"><a href="#"> Selected show </a></dd> </dl> <dl
class="third"> <dt class="right1"></dt><dd class="right2"><a
href="#"> Global street shot </a></dd> </dl> </div> </div> </div>
css
.content{ width: 980px; margin: 0 auto; } .content .style_bg{ width: 908px;
height: 330px; background-color: darkorange; padding: 10px 36px 5px; } .banner
img{ width: 980px; height: 300px; margin-bottom: 20px; } .style{ width: 892px;
height: 314px; background-color: #ffffff; padding: 8px 10px 8px 6px; } .style
dl{ width: 279px; height: 313px; float: left; margin-left: 4px; } .style
.third{ width: 322px; } .style dt,.style dd{ float: left; } .style
.left1,.style .left3,.style .center1,.style .center3{ width: 162px; } .style
.left2,.style .left4,.style .center2,.style .center4,.style .right2{ width:
117px; } .style .left1,.style .left2,.style .center1,.style .center2{
margin-bottom: 8px; } .style .left1{ height: 169px; background:
url("../images/1.jpg") no-repeat; background-size: 100% 100%; } .style .left2{
height: 169px; line-height: 169px; } .style .left3{ height: 137px; background:
url("../images/2.jpg") no-repeat; background-size: 100% 100%; } .style .left4{
height: 137px; line-height: 137px; } .style .center1{ height: 169px;
background: url("../images/3.jpg") no-repeat; background-size: 100% 100%; }
.style .center2{ height: 169px; line-height: 169px; } .style .center3{ height:
137px; background: url("../images/4.jpg") no-repeat; background-size: 100%
100%; } .style .center4 { height: 137px; line-height: 137px; } .style .right1{
height: 314px; width: 190px; background: url("../images/5.jpg");
background-size: 100% 100%; } .style .right2{ height: 314px; line-height:
314px; } .style a{ display: block; text-align: center; background-color:
antiquewhite; color: #ec6e47; text-decoration: none; } .style a:hover{
background-color: pink; font-size: 20px; }
Make shopping content section ：
html
<h2 class="title"> Fashion frontier /Tidal Current</h2> <div class="current"> <div
class="sale"> <a href="#"><img src="images/1.2.jpg"></a> <div
class="price">¥588</div> <a href="#" class="introduce">it UNDER
GARDEN Men's hooded zipper Blazer 2018 New products in spring and summer 7205XAA</a> <div
class="salemount"><span> sales volume ：10</span></div> <div class="rate"> evaluate ：6</div> <div
class="buy"><a href="#"> Buy now </a></div> </div> <div class="sale"> <a
href="#"><img src="images/1.2.jpg"></a> <div class="price">¥588</div> <a
href="#" class="introduce">it UNDER GARDEN Men's hooded zipper Blazer 2018 New products in spring and summer 7205XAA</a> <div
class="salemount"><span> sales volume ：10</span></div> <div class="rate"> evaluate ：6</div> <div
class="buy"><a href="#"> Buy now </a></div> </div> <div class="sale"> <a
href="#"><img src="images/1.2.jpg"></a> <div class="price">¥588</div> <a
href="#" class="introduce">it UNDER GARDEN Men's hooded zipper Blazer 2018 New products in spring and summer 7205XAA</a> <div
class="salemount"><span> sales volume ：10</span></div> <div class="rate"> evaluate ：6</div> <div
class="buy"><a href="#"> Buy now </a></div> </div> </div>
css:
/*h2 title */ .title{ font-family: Regular script ; color: white; display: block;
background-color: #ec6e47; margin-top: 20px; margin-left: 117px; width: 275px;
height: 50px; line-height: 50px; } /* population */ .current{ height: 542px; width:
957px; background-color: #FCF; padding: 10px 36px 5px; position: relative;
margin: 0 auto; } /* first div*/ .current .sale{ margin: 20px 8px 0px; width:
260px; height: 458px; padding: 20px; background-color: white; border: 1px solid
darkorange; float: left; } .current img{ width: 253px; height: 278px; } /* Price */
.current .price{ color: red; font-weight: bold; } /* introduce */ .current .introduce{
color: deepskyblue; font-weight: normal; text-decoration: none; font-family:
Han Yi Liu Kaifan ; display: block; margin: 10px auto; } /* sales volume */ .current .salemount{ float:
left; height: 20px; font-size: smaller; width: 120px; border-right:#CCC solid
1px; line-height: 20px; margin-bottom: 6px; margin-left: 10px; } /* evaluate */
.current .rate{ float: left; color: darkorange; height: 20px; line-height:
20px; font-size:18px; margin-left: 20px; margin-bottom: 20px; } .current .buy{
clear: both; height: 20px; line-height: 20px; width: 145px; text-align: center;
padding: 5px 0px; margin: 0px auto; background-color: darkorange;
border-radius: 30px; border: 2px solid red; } .current .buy a{ color: white;
text-decoration: none; } .current .buy:hover{ background-color:coral;
font-size:large; cursor:pointer; } .current .introduce:hover{ text-decoration:
underline; }
Technology