<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;/* 默認邊距去掉 */
padding: 0;/* 默認填充去掉 */
}
/* 第一層 */
#header{
height: 50px;
background: #E83828;
}
#header .head{
width: 1005px;
height: 50px;
background: #D1D3D6;
margin: auto;/* 兩邊邊距自動設置一致，使得其居中 */
}
/* 第二層 */
#banner{
height: 500px;
background: slateblue;
}
/* 第三層 */
#category{
width: 1005px;
height: 200px;
margin: auto;
background: #FA8072;
}
#category .item{
width:125px;
height: 165px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-top: 10px;
border-right: 1px dashed black;
float: left;
}
#category .item.first{
padding-left: 0;
}
#category .item.last{
padding-right: 0;/* 把右邊距的填充去掉 */
border: 0;
}
/* 第四層 */
#case{
height: 490px;
background: #eeeeee;
}
#case .title_text{
width: 1005px;
margin: auto;
padding-bottom: 10px;
font-size: 45px;
}
#case .item-wrapper{
width: 1000px;
margin: auto;
overflow: auto;
}
#case .item-wrapper .item{
width: 320px;
height: 330px;
background: #9ACD32;
float: left;
}
#case .item-wrapper .item.mg{
margin-left: 20px;
margin-right: 20px;
}
#case p{
width: 1005ppx;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 30px;
color: dimgray;
}
</style>
</head>
<body>
<div id="header">
<div class="head"></div>
</div>
<div id="banner"></div>
<div id="category">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>
<div id="case">
<div class="title_text">
Case
</div>
<div class="item-wrapper">
<div class="item"></div>
<div class="item mg"></div>
<div class="item"></div>
</div>
<p>查看更多+</p>
</div>
</body>
</html>
如圖：
