html 中div布局的简单使用
的有关信息介绍如下:html中的布局非常重要,下面我来简单介绍一下。
观察图片构成。总共十一个板块。首先要有一个大的div包含所有,背景色等。
.background{
background-color: #008000;
height: 800px;
width: 420px;
margin: 0 auto;
}
.a1{
height: 80px;
width: 200px;
background: #fff;
margin-left: 50px;
margin-top: 10px;
margin-right: 10px;
float: left;
.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;
.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;
}
.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;
}