简单布局
2018-10-21 本文已影响0人
Alice丨殇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.head{
height: 49px;
background-color:red;
}
.head1{
height: 81px;
background-color: orange;
}
.list{
height: 53px;
background-color: yellow;
border-top: orange;
}
.advertising{
height: 85px;
width: 700px;
background-color: green;
margin-left: 284px;
margin: 20px 20px 20px 284px;
}
.advertising1{
height: 85px;
width: 180px;
background-color: green;
margin-left: 284px;
margin: 20px auto;
position: absolute;
top:183px;
left:1054px;
}
.slideshow{
height: 330px;
width: 950px;
background-color: cyan;
margin: 0 auto;
}
.slideshow1{
height: 100%;
width: 260px;
background-color: purple;
float: left;
}
.slideshow2{
height: 100%;
width: 470px;
background-color: gray;
float: left;
margin: 0 0;
}
.slideshow3{
height: 100%;
width: 220px;
background-color: red;
float: left;
}
.plate{
height: 85px;
width: 950px;
background-color: blue;
margin: 20px auto;
}
.hot{
height: 410px;
width: 950px;
background-color: cyan;
margin: 0 auto;
}
.brand{
height: 45px;
width: 950px;
background-color: green;
margin: 20px auto;
}
.share{
height: 85px;
width: 700px;
background-color: green;
margin-left: 284px;
margin: 20px 20px 20px 284px;
}
.share1{
height: 85px;
width: 180px;
background-color: green;
margin-left: 284px;
margin: 20px auto;
position: absolute;
top:1238px;
left:1054px;
}
.raise{
width: 950px;
height: 70px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="head1"></div>
<div class="list"></div>
<div class="advertising"></div>
<div class="advertising1"></div>
<div class="slideshow">
<div class= slideshow1></div>
<div class= slideshow2></div>
<div class= slideshow3></div>
</div>
<div class="plate"></div>
<div class="hot"></div>
<div class="brand"></div>
<div class="share"></div>
<div class="share1"></div>
<div class="raise"></div>
</body>
</html>
[图片上传中...(479d897cc6e4af00e92e41322bf1b40.png-49584f-1540098992048-0)]
image.png
