项目布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>唯品会</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class='a'>
<div class='b'>
<div class='c'></div>
<div class='d'></div>
</div>
</div>
<div class='e'>
<div class='f'>
<div class='g'>
<img src="img/123.png" alt='logo' width='160px' />
<img src="img/345.png" alt='bao' width='302.97px'/>
</div>
<div class='h'></div>
</div>
</div>
<div class='i'>
<div class='j'></div>
</div>
<div class='k'>
<div class='l'>
<div class='m'></div>
<div class='n'></div>
</div>
</div>
<div class='bikanqu'>
<img src="img/678.jpg" alt='bikan' width='1170px' />
<div class='zhong'>
<div class='tpp'>
<img src="img/789.jpg" alt='tpp' width='240px' />
<img src="img/789.jpg" alt='tpp' width='240px' />
<img src="img/789.jpg" alt='tpp' width='240px' />
<div class='shu'>
<div class='o'>
<img src="img/112.jpg" alt='weipin' width='360px' />
</div>
<div class='p'>
<img src="img/112.jpg" alt='weipin' width='360px' />
</div>
</div>
</div>
</div>
<img src="img/223.jpg" alt="huawei" width='1170px' />
</div>
</body>
</html>
样式：
.a{
width: 100%;
height: 28px;
background-color: #f5f5f5;
}
.b{
width: 1000px;
height: 28px;
background-color: white;
margin:0 auto;
}
.c{
width: 86px;
height: 28px;
background-color: green;
float:left;
}
.d{
width: 771px;
height: 28px;
background-color: yellow;
float:right;
}
.e{
width: 100%;
height: 100px;
background-color: #fff;
}
.f{
width: 1000px;
height: 100%;
background-color: orange;
margin:0 auto;
}
.g{
float:left;
}
.h{
width: 480px;
height: 33.97px;
background-color: blue;
/display:inline-block;/
float:right;
margin-top: 33px;
/vertical-align: top;/
}
.i{
width: 100%;
height: 42.99px;
background-color: #fff;
}
.j{
width: 1000px;
height: 100%;
background-color: red;
margin:0 auto;
}
.k{
width: 100%;
height: 501.99px;
background-color: purple;
border-top: 1px red solid;
}
.l{
width: 1167.97px;
height: 451.99px;
background-color: green;
margin:0 auto;
}
.m{
width: 1145.99px;
height: 400px;
background-color: black;
margin:0 auto;
border:10px white solid;
border-bottom: none;
margin-top: 30px;
}
.n{
width: 1145.99px;
height: 40px;
background-color: yellow;
margin:0 auto;
border:10px white solid;
border-top: none;
border-bottom: none;
}
.bikanqu{
width: 1579.17px;
height: 540px;
background-color: white;
margin-top: 20px;
margin:0 auto;
}
.zhong{
width: 1400px;
margin:0 auto;
}
.bikan{
margin:0 auto;
}
.tpp{
margin-top: 20px;
float:left;
}
.shu{
float:right;
}
.p{
margin-top: 27px;
}
/.sousuo{
width: 448.997px;
height: 31.992px;
background-color: black;
float:right;
/ margin-top: 34px;
/display:inline-block;/
/vertical-align: top;/
/.sousuo input{
width: 335px;
height: 26px;
}/
.content{
width: 100%;
height: 400px;
background-color:yellow;
}
.footer{
width: 200px;
height: 100px;
background-color:blue;
}*/
