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

 

1、表格還是Div

“生存還是死亡？這是一個(gè)問(wèn)題。”對(duì)于網(wǎng)頁(yè)布局來(lái)說(shuō)，用表格還是用Div，也是一個(gè)問(wèn)題。在Div+CSS占網(wǎng)頁(yè)布局統(tǒng)治地位的今天，在學(xué)習(xí)它的時(shí)候，有必要先回顧一下表格的方法。

 

2、利用表格進(jìn)行網(wǎng)頁(yè)布局

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

 

3、利用Div+CSS進(jìn)行網(wǎng)頁(yè)布局

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

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

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

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

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

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

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

 

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

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

我們已經(jīng)瀏覽過(guò)眾多的網(wǎng)站，從目前流行的結(jié)構(gòu)來(lái)看，主流網(wǎng)站的網(wǎng)頁(yè)布局一般有如下幾種：

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

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

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