html 中div布局的简单使用
1、观察图片构成。总共十一个板块。首先要有一个大的div包含所有，背景色等。
2、.background{
background-color: #008000;
height: 800px;
width: 420px;
margin: 0 auto;
}
3、.a1{
height: 80px;
width: 200px;
background: #fff;
margin-left: 50px;
margin-top: 10px;
margin-right: 10px;
float: left;
4、.a2{height: 80px;
width: 100px;
background-color: #fff;
margin-top: 10px;
float: left;
}
.a3{
height: 80px;
width: 310px;
background-color: #FFFFFF;
margin-left: 50px;
margin-top: 10px;
float: left;
}
.a4{
height: 80px;
width: 310px;
background-color: #FFFFFF;
margin-left: 50px;
float: left;
margin-top: 10px;
5、.a5{
height: 80px;
width: 150px;
background: #fff;
margin-left: 50px;
margin-top: 10px;
margin-right: 10px;
float: left;
}
.a6{height: 80px;
width: 150px;
background-color: #fff;
margin-top: 10px;
float: left;
}
.a7{height: 50px;
width: 310px;
background-color: #fff;
margin-top: 10px;
margin-left: 50px;
float: left;
}
.a8{
height: 80px;
width: 150px;
background: #fff;
margin-left: 50px;
margin-top: 10px;
margin-right: 10px;
float: left;
}
6、.a9{height: 80px;
width: 150px;
background-color: #fff;
margin-top: 10px;
float: left;
}
.a10{height: 80px;
width: 310px;
background-color: #fff;
margin-top: 10px;
float: left;
margin-left: 50px;
}
.a11{height: 80px;
width: 310px;
background-color: #fff;
margin-top: 10px;
float: left;
margin-left: 50px;
margin-bottom: 10px;
}
</style>
7、</head>
<body>
<div >
<div class="background">
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
<div class="a6"> 6</div>
<div class="a7">7</div>
<div class="a8">8</div>
<div class="a9">9</div>
<div class="a10">10</div>
<div class="a11">11</div>
</div>
</div>
</body>
</html>