页面布局：

标题：前端的一部分，用于页面顶部。标题标签用于向网页添加标题部分。

导航栏：导航栏和菜单列表一样。它用于使用超链接显示内容信息。

索引/侧边栏：它包含其他信息或广告，并不总是需要添加到页面中。

内容部分：内容部分是展示内容的主要部分。

页脚：页脚部分包含联系信息和其他与网页相关的查询。页脚部分总是放在页面的底部。页脚标记用于设置网页中的页脚。

使用表格布局

创建布局的最简单和更流行的方法是使用HTML表格标签。您可以按照自己的方式排列表格中的列和行

例子

例如，下面的HTML布局示例是使用一个3行2列的表实现的，但是页眉和页脚列使用colspan属性跨越了这两列

一个

2

三

四

五

六

七

八

九

10

11

12

13

14

15

16

17

18

19

20

21

22

表格宽度=' '边框='0 '

tr

td colspan='2' bgcolor='#b5dcb3 '

h1标题/h1

/td

/tr

tr valign=' top '

td bgcolor='#aaa' width='20 '

b工具栏/b

/td

TD bgcolor=' # eee ' width=' 100 ' height=' 200 '

内容

/td

/tr

tr

td colspan='2' bgcolor='#b5dcb3 '

中心

页脚

/中心

/td

/tr

/table

效果图：

多列布局

要将网页内容放在多个页面上，您可以将内容保留在中间列，或者使用左列来使用菜单，右列可以用来放置广告或其他内容。

一个

2

三

四

五

六

七

八

九

10

11

12

13

表格宽度=' '边框='0 '

tr valign=' top '

td bgcolor='#aaa' width='20% '

b菜单/b

/td

td bgcolor='#b5dcb3 '高度='200 '宽度='60% '

内容

/td

td bgcolor='#aaa' width='20% '

明亮的菜单/b

/td

/tr

桌子

效果图：

使用div布局

Div元素是用于对HTML元素进行分组的块级元素。虽然div标签是块级别的元素，但是HTML span元素用于在内嵌级别对元素进行分组

一个

2

三

四

五

六

七

八

九

10

11

12

13

14

15

16

17

18

19

div style='width:450px '

div style=' background-color : # b5 DC B3；'宽度： '

h1标题/h1

/div

div style=' background-color : # AAA；height:200px宽度width:100px' float:left'

Divb左栏/b/div

/div

div style=' background-color : # eee；height:200px宽度width:250px' float:left'

b内容/b

/div

div style=' background-color : # AAA；height:200px宽度width:100px' float:right'

divb /b/div右栏

/div

div style=' background-color : # b5 DC B3；clear:both '

中心

页脚

/中心

/div

/div

效果图：

总结：以上是本文的全部内容，希望对大家有所帮助。