目前，利用CSS和Div組合對頁面進行布局已經(jīng)成為一個公認的標準方法，而在這之前，流行甚至唯一的方式就是利用表格進行頁面布局。本文就先從它們兩個各自的優(yōu)缺點談起。

 

1、表格還是Div

“生存還是死亡？這是一個問題。”對于網(wǎng)頁布局來說，用表格還是用Div，也是一個問題。在Div+CSS占網(wǎng)頁布局統(tǒng)治地位的今天，在學習它的時候，有必要先回顧一下表格的方法。

 

2、利用表格進行網(wǎng)頁布局

利用表格進行網(wǎng)頁布局的方法其實很簡單：將網(wǎng)頁分為幾個表格，頁面上方，一般是導航條的位置，一個表格；頁面中間，內(nèi)容列表，新聞圖片等等，分為2到3欄，一個表格；頁面下部，文字導航條，版權聲明等等，一個表格。如果在頁面中間的內(nèi)容部分有所需要，還可以在其中進一步嵌套表格。

 

3、利用Div+CSS進行網(wǎng)頁布局

既然利用表格進行網(wǎng)頁布局有前面所提到的一些缺點，近年來人們開始逐漸利用Div+CSS的方法實現(xiàn)布局的任務。

Div+CSS的方法最大的優(yōu)點就是講內(nèi)容和布局分開處理，去掉了表格那么多的繁瑣標簽，縮減了網(wǎng)頁文件大小。根據(jù)網(wǎng)頁的流行結構，利用Div+CSS能夠完成如下多種布局：

創(chuàng)建一列式網(wǎng)頁布局。

創(chuàng)建兩列式網(wǎng)頁布局。

創(chuàng)建多列式網(wǎng)頁布局。

創(chuàng)建不規(guī)則網(wǎng)頁布局。

從下面的內(nèi)容開始，我們將學習利用Div和CSS創(chuàng)建網(wǎng)頁布局的具體過程。

 

4、用Div+CSS創(chuàng)建一列式網(wǎng)頁布局

上文中提到了網(wǎng)頁布局的概念與兩種布局方法，特別是傳統(tǒng)表格布局的優(yōu)劣。本小節(jié)將介紹用Div+CSS創(chuàng)建網(wǎng)頁布局的具體過程。

我們已經(jīng)瀏覽過眾多的網(wǎng)站，從目前流行的結構來看，主流網(wǎng)站的網(wǎng)頁布局一般有如下幾種：

一列式布局：整個網(wǎng)頁一列到底部，不分左右兩欄，類似大部分書籍的排版方式。

兩列式布局：網(wǎng)頁主要部分分為左、右兩個區(qū)域，分別放置不同的內(nèi)容，類似大部分雜志的排版方式，多用于一般商業(yè)網(wǎng)站、博客等等。

多列式布局：網(wǎng)頁主要部分分為左、中、右三個甚至更多的區(qū)域，分別放置不同的內(nèi)容，類似不少報紙的排版方式，多用于一般商業(yè)網(wǎng)站等等。