文章內(nèi)容

利用CSS+Div進行網(wǎng)頁布局和排版

發(fā)布時間: 2012/8/20 17:31:52

本文將講述如何進行網(wǎng)頁的布局和排版。所謂布局，英文名稱叫做Layouts，是指網(wǎng)頁上不同功能分區(qū)的數(shù)量以及它們之間排列的位置和順序。從事網(wǎng)頁布局這項工作非常像報紙的主編，將每天大大小小長短不一的新聞在固定的版面中進行擺放，以達到最好的效果。

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

1、表格還是Div

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

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

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

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

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

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

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

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

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

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

從下面的內(nèi)容開始，我們將學(xué)習(xí)利用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)站，從目前流行的結(jié)構(gòu)來看，主流網(wǎng)站的網(wǎng)頁布局一般有如下幾種：

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