截图在最后，html和css代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./CSS4.css">
</head>
<body>
<div class="nav">
<ul>
<li><img src="./images/logo.png" alt="图片获取失败"></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>
</div>
</div>
<div class="main">
<div class="banner"><img src="./images/banner.jpg" alt=""></div>
<div class="center">
<div class="content">
<dl>
<dt class="l1t1"></dt>
<dd class="l1d1"><a href="#">明星风尚</a></dd>
<dt class="l1t2"></dt>
<dd class="l1d2"><a href="#">时尚博主</a></dd>
</dl>
<dl>
<dt class="l2t1"></dt>
<dd class="l2d1"><a href="#">流行搭配</a></dd>
<dt class="l2t2"></dt>
<dd class="l2d2"><a href="#">精选秀场</a></dd>
</dl>
<dl>
<dt class="l3t1"></dt>
<dd class="l3d1"><a href="#">环球街拍</a></dd>
</dl>
</div>
</div>
<div class="below">
<h2>潮流前沿/Tidal current</h2>
<div>
<dl>
<dt></dt>
<dd>潮流饰品</dd>
<dd class="d2"><a href="#" class="a">快速购买通道</a> </dd>
</dl>
<dl>
<dt></dt>
<dd>时尚女鞋</dd>
<dd class="d2"><a href="#" class="a">快速购买通道</a> </dd>
</dl>
<dl>
<dt></dt>
<dd>精品包包</dd>
<dd class="d2"><a href="#" class="a">快速购买通道</a> </dd>
</dl>
<dl>
<dt></dt>
<dd>百搭衣帽</dd>
<dd class="d2"><a href="#" class="a">快速购买通道</a> </dd>
</dl>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2006-2016 CHAOLlUFUSHlcom,All rights reserved.</p>
<p> 2001-2018,版权所有 潮流服饰 85CP备13385453</p>
</div>
</body>
</html>
*{margin:0;
padding:0;
list-style: none;
}
body{background:#fff9ed;
font-family:"微软雅黑";
font-size:14px;
}
a:link,a:visited{
text-decoration:none;
color:#fff;
font-size:16px;
}
.nav{
width: 100%;
height: 128px;
background-image: url(./images/head_bg.jpg);
border-image-repeat: repeat;
border-bottom: 3px solid #d5d5d5;
}
.nav ul{
width: 980px;
margin-top: 0px;
margin-bottom: 0px;
margin:0 auto ;
}
.nav li{
float: left;
}
.nav li a{
height: 91px;
width: 119px;
text-align: center;
line-height: 70px;
display: inline-block;
}
li a:hover{background:url(./images/xuanfu.png) center center;}
.main{
width: 980px;
margin-top: 0;
margin-bottom: 0;
margin: 0 auto;
}
.center{
width: 908px;
height: 330px;
background-color: #ec6e47;
padding: 10px 36px 5px 36px;
}
.content{
width: 892px;
height: 313px;
background-color: #fff;
padding: 8px 10px 8px 6px;
}
dl:nth-of-type(1){
width: 279px;
}
dl:nth-of-type(2){
width: 279px;
}
dl:nth-of-type(3){
width: 322px;
}
dl{
height: 313px;
margin-left: 4px;
float: left;
}
.l1t1{margin-bottom: 5px; width: 162px;height: 169px;background-image: url(./images/pic01.jpg);}
.l1t2{width: 162px;height: 137px;background-image: url(./images/pic02.jpg);}
.l1d1{margin-bottom: 5px; width: 117px;height: 169px;text-align: center;}
.l1d1 a{line-height: 169px;}
.l1d2{width: 117px;height: 137px;text-align: center;}
.l1d2 a{line-height: 137px;}
.l2t1{margin-bottom: 5px; width: 162px;height: 117px;background-image: url(./images/pic03.jpg);}
.l2t2{width: 162px;height: 188px;background-image: url(./images/pic04.jpg);}
.l2d1{margin-bottom: 5px; width: 117px;height: 117px;text-align: center;}
.l2d1 a{line-height: 117px;}
.l2d2{width: 117px;height: 188px;text-align: center;}
.l2d2 a{line-height: 188px;}
.l3t1{width: 205px;height: 314px;background-image: url(./images/pic05.jpg);}
.l3d1{width: 117px;height: 313px;text-align: center;}
.l3d1 a{line-height: 313px;}
dt,dd{float: left;}
.center dd a{
display: block;
width: 100%;
height: 100%;
background-color: #242424;
}
.center a:hover{background-color: #ea6c46;}
h2{
width:259px;
height:45px;
background:#ea6c46;
font-size:20px;
font-weight:100;
line-height:45px;
text-align:center;
color:#fff;
margin-top:80px;
}
.below{
width:958px;
height:342px;
background:#fff;
border:1px solid #dcd2ba;
padding:13px 0 0 20px;
}
.below div dl{
width:229px;
height:330px;
border:1px solid #dcd2ba;
float: left;
margin-right:5px;
}
.below div dl dt{
width:229px;
height:212px;
border-bottom:1px solid #dcd2ba;
}
.below div dl dd:nth-of-type(1){
width:229px;
height:66px;
background:#fff;
line-height:66px;
color:#7a7a7a;
font-size:22px;
text-align:center;
}
.d2{
width:140px;
height:38px;
background:#f3734e url(./images/gouwu.jpg) left center no-repeat;
margin:0 14px;
line-height:38px;
padding-left:60px;
color:#fff;
}
.below dt:nth-of-type(1){
background-image: url(./images/match01.jpg);
background-repeat: no-repeat;
}
.below dt:nth-of-type(2){
background-image: url(./images/match02.jpg);
background-repeat: no-repeat;
}
.below dt:nth-of-type(3){
background-image: url(./images/match03.jpg);
background-repeat: no-repeat;
}
.below dt:nth-of-type(4){
background-image: url(./images/match04.jpg);
background-repeat: no-repeat;
}
.a{
width: 180px;/*实验要求 180px */
height: 38px;
text-align: center;/*文字居中*/
line-height: 38px;
}
.footer{
width:100%;
height:103px;
background:#020202;
color:#fff;
line-height:26px;
text-align:center;
padding-top:50px;
margin-top:65px;
}
