<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通栏平均分布型</title>
<style>
*{
margin: 0;
padding: 0;
}
.top{
width:100%;
height: 100px;
background-color: pink;
}
.main{
width: 1200px;
margin: 50px auto;
height: 800px;
background-color: #eee;
}
.main .banner{
width: 100%;
height: 100px;
background-color: yellow;
}
.main .conter01{
width: 100%;
height: 270px;
background-color: cyan;
margin: 30px 0;
}
.main .conter01 div{
float: left;
width: 292px;/*(1200/3)-10*/
height: 270px;
background-color: red;
margin-right: 10px
}
.main .conter01 .mar,
.main .conter02 .mar{
margin-right: 0;
float: right;
}
.main .conter02{
width: 100%;
height: 400px;
background-color: grey;
}
.main .conter02 div{
float: left;
width: 292px;/*(1200/3)-10*/
height: 400px;
background-color: red;
margin-right: 10px
}
.footer{
width: 100%;
height: 200px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main">
<div class="banner"></div>
<div class="conter01">
<div></div>
<div></div>
<div></div>
<div class="mar"></div>
</div>
<div class="conter02">
<div></div>
<div></div>
<div></div>
<div class="mar"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
4586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
