html模块的三种布局方法
1、流动布局（html网页默认的布局方式）
特点：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2、浮动布局(float)
特点：默认布局下，块状元素独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。
如下
div{
width:200px;
height:200px;
border:2pxredsolid;
float:right;
}
3、层模型
特点：如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
利用HTML进行布局的方法有：1、通过“<table>”标签来对表格的行和列进行排列来实现页面布局的效果；2、将网页内容放在多个页面中的多列布局；3、使用div和span标签进行布局。
页面布局：
标题：前端的一部分，用于页面顶部。<header>标签用于在网页中添加标题部分。
导航栏：导航栏与菜单列表相同。它用于使用超链接显示内容信息。
索引/侧边栏：它包含其他信息或广告，并不总是需要添加到页面中。
内容部分：内容部分是显示内容的主要部分。
页脚：页脚部分包含联系信息和与网页相关的其他查询。页脚部分始终放在网页的底部。<footer>标签用于设置网页中的页脚。
使用表格布局
最简单和最流行的创建布局的方法是使用HTML<table>标签。可以按照自己喜欢的方式来对表格中的列和行进行排列
例
例如，使用包含3行和2列的表来实现以下HTML布局示例，但页眉和页脚列使用colspan属性跨越两列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tablewidth="100%"border="0">
<tr>
<tdcolspan="2"bgcolor="#b5dcb3">
<h3>标题</h3>
</td>
</tr>
<trvalign="top">
<tdbgcolor="#aaa"width="20">
<b>侧边栏</b>
</td>
<tdbgcolor="#eee"width="100"height="200">
内容
</td>
</tr>
<tr>
<tdcolspan="2"bgcolor="#b5dcb3">
<center>
页脚
</center>
</td>
</tr>
</table>
效果图：
多列布局
将网页内容放在多个页面中，可以将内容保留在中间列中，也可以使用左栏使用菜单，右栏可以用于放置广告或其他内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
<tablewidth="100%"border="0">
<trvalign="top">
<tdbgcolor="#aaa"width="20%">
<b>左菜单</b>
</td>
<tdbgcolor="#b5dcb3"height="200"width="60%">
内容
</td>
<tdbgcolor="#aaa"width="20%">
<b>右菜单</b>
</td>
</tr>
<table>
效果图：
使用div布局
<div>元素是用于对HTML元素进行分组的块级元素。虽然<div>标记是块级元素，但HTML<span>元素用于在内联级别对元素进行分组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<divstyle="width:450px">
<divstyle="background-color:#b5dcb3;width:100%">
<h3>标题</h3>
</div>
<divstyle="background-color:#aaa;height:200px;width:100px;float:left;">
<div><b>左侧栏</b></div>
</div>
<divstyle="background-color:#eee;height:200px;width:250px;float:left;">
<b>内容</b>
</div>
<divstyle="background-color:#aaa;height:200px;width:100px;float:right;">
<div><b>右侧栏</b></div>
</div>
<divstyle="background-color:#b5dcb3;clear:both">
<center>
页脚
</center>
</div>
</div>
效果图：
Image020.png