效果展示：
制作头部：
html
<header>
<ul>
<li class="logo"><img src="images/logo.jpg"></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>
</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;/*去除无序列表的·*/
}
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;/*去除下划线*/
line-height: 70px;
width: 120px;
text-align: center;
color: hotpink;
}
header li a:hover{
color: darkorange;
font-size: 20px;
}
随后是一张图片：
制作内容部分：
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="#">明星风尚</a> </dd>
<dt class="left3"></dt><dd class="left4"><a href="#">时尚博主</a> </dd>
</dl>
<dl>
<dt class="center1"></dt><dd class="center2"><a href="#">流行搭配</a></dd>
<dt class="center3"></dt><dd class="center4"><a href="#">精选秀场</a></dd>
</dl>
<dl class="third">
<dt class="right1"></dt><dd class="right2"><a href="#">环球街拍</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;
}
制作购物内容部分：
html
<h2 class="title">时尚前沿/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男连帽拉链冲锋衣2018春夏新品7205XAA</a>
<div class="salemount"><span>销售量：10</span></div>
<div class="rate">评价：6</div>
<div class="buy"><a href="#">立即抢购</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男连帽拉链冲锋衣2018春夏新品7205XAA</a>
<div class="salemount"><span>销售量：10</span></div>
<div class="rate">评价：6</div>
<div class="buy"><a href="#">立即抢购</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男连帽拉链冲锋衣2018春夏新品7205XAA</a>
<div class="salemount"><span>销售量：10</span></div>
<div class="rate">评价：6</div>
<div class="buy"><a href="#">立即抢购</a></div>
</div>
</div>
css:
/*h2标题*/
.title{
font-family: 楷体;
color: white;
display: block;
background-color: #ec6e47;
margin-top: 20px;
margin-left: 117px;
width: 275px;
height: 50px;
line-height: 50px;
}
/*总体*/
.current{
height: 542px;
width: 957px;
background-color: #FCF;
padding: 10px 36px 5px;
position: relative;
margin: 0 auto;
}
/*第一个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;
}
/*价格*/
.current .price{
color: red;
font-weight: bold;
}
/*介绍*/
.current .introduce{
color: deepskyblue;
font-weight: normal;
text-decoration: none;
font-family: 汉仪柳楷繁;
display: block;
margin: 10px auto;
}
/*销售量*/
.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;
}
/*评价*/
.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;
}