简单布局
2018-12-25 本文已影响0人
派克_i
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尚品网_全球时尚轻奢购物网站_|海量新品官网</title>
<style type="text/css">
/* 盒子1*/
.box-1{
width: 1309px;
height: 118px;
background-color: deeppink;
}
/*大盒子1*/
.Dbox1{
width: 382px;
height: 30px;
background-color:darkolivegreen;
float: right;
margin: 0 auto;
}
/*大盒子2*/
.Dbox2{
width: 1309px;
height: 40px;
background-color: #bbffaa;
}
/*大盒子*/
.Dbox{
width: 1200px;
height: 77.61px;
background-color: #bbffaa;
}
/*小盒子1*/
.box1{
width: 78px;
height: 78px;
background-color: chartreuse;
float: left;
}
/*小盒子2*/
.box2{
width: 78px;
height: 78px;
background-color: darkred;
float: left;
}
/*小盒子3*/
.box3{
width: 78px;
height: 78px;
background-color: #2548;
float: left;
}
/*全图*/
.header {
width: 1309px;
height: 5449.31px;
background-color: dodgerblue;
}
/*盒子2*/
.box-2{
width: 1230px;
height: 765px;
background-color: darkgoldenrod;
margin: 0 auto;
}
/*盒子3*/
.box-3{
width: 1230px;
height: 859px;
background-color: cadetblue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box-1">
<div class="Dbox">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="Dbox1"></div>
<div class="Dbox2">
<span>
<a href="#">单季新品</a>
<a href="#">服装</a>
<a href="#">鞋靴</a>
<a href="#">箱包</a>
<a href="#">配件</a>
<a href="#">品牌</a>
<a href="#">特卖</a>
</span>
</div>
</div>
<div class="header">
<div class="box-2"></div>
<div class="box-3">
<span>ALBERTA FERRETTI</span></p>
<span>马卡龙色针织裙</span>
</div>
</div>
</body>
</html>
image.png
