利用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

<table width = "100%" border = "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">

<center>

頁尾

</center>

</td>

</tr>

</table>

效果圖：

多列布局

將網頁內容放在多個頁面中，可以將內容保留在中間列中，也可以使用左欄使用選單，右欄可以用於放置廣告或其他內容。

1

2

3

4

5

6

7

8

9

10

11

12

13

<table width = "100%" border = "0">

<tr valign = "top">

<td bgcolor = "#aaa" width = "20%">

<b>左選單</b>

</td>

<td bgcolor = "#b5dcb3" height = "200" width = "60%">

內容

</td>

<td bgcolor = "#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

<div style = "width:450px">

<div style = "background-color:#b5dcb3; width:100%">

<h1>標題</h1>

</div>

<div style = "background-color:#aaa; height:200px; width:100px; float:left;">

<div><b>左側欄</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;">

<div><b>右側欄</b></div>

</div>

<div style = "background-color:#b5dcb3; clear:both">

<center>

頁尾

</center>

</div>

</div>

效果圖：

Image 020.png

html模組的三種佈局方法

1、流動佈局（html網頁預設的佈局方式）

特點：

1、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。

2、內聯元素都會在所處的包含元素內從左到右水平分佈顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）

2、浮動佈局(float)

特點：預設佈局下，塊狀元素獨佔一行，如果現在我們想讓兩個塊狀元素並排顯示。就需要使用float來實現。

如下

div{

width:200px;

height:200px;

border:2px red solid;

float:right;

}

3、層模型

特點：如果我想一個div在另外一個div的上面，我們就需要可以使用絕對定位來完成，層模型的三種定位方式relative、absolute、fixed

需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，

然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。