您的位置首页百科问答

html 中div布局的简单使用

html 中div布局的简单使用

的有关信息介绍如下:

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;

}

1

2

3

4

5

6

7

8

9

10

11