利用CSS+Div進行網頁布局和排版

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

 

1、表格還是Div

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

 

2、利用表格進行網頁布局

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

 

3、利用Div+CSS進行網頁布局

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

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

創建一列式網頁布局。

創建兩列式網頁布局。

創建多列式網頁布局。

創建不規則網頁布局。

從下面的內容開始，我們將學習利用Div和CSS創建網頁布局的具體過程。

 

4、用Div+CSS創建一列式網頁布局

上文中提到了網頁布局的概念與兩種布局方法，特別是傳統表格布局的優劣。本小節將介紹用Div+CSS創建網頁布局的具體過程。

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

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

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

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