CSS+DIV布局與表格布局網頁的對比

聞立鷗

摘要：隨著信息技術的飛速發展，網頁的制作技術也在不斷進步，CSS+DIV是當前網頁布局的主流技術，本文通過實例將CSS+DIV布局網頁與傳統的表格布局網頁進行比較，清晰地驗證了CSS+DIV技術布局網頁的高效工具。

關鍵詞：CSS；DIV；技術

中圖分類號：TN915.02 文獻標志碼：A 文章編號：1674-9324（2014）37-0225-03

一、CSS+DIV布局簡介

DIV元素是html語言中的一個元素，是標簽，用來為HTML文檔的內容提供結構和背景的元素。css是英語Cascading Style Sheets的縮寫，中文名稱為層疊樣式表，它是用來表現網頁外觀樣式的計算機語言。CSS提供了豐富的樣式表現功能，如字體、段落、顏色、背景、布局等。每個HTML標簽都含有style屬性。利用style屬性可以將CSS樣式直接寫入HTML文檔的某個標簽內。DIV+CSS的布局方法簡單來說就是使用div標簽作為容器，使用CSS技術來排布div標簽的布局方法。

二、表格布局網頁的問題

表格曾經是網頁制作中應用最頻繁的元素，起主要作用是定位和排版網頁，便于初學者掌握和使用。但是使用表格技術制作的網頁，由于嵌套了大量的表格，不僅容易產生頁面內容錯位，使網頁維護和更新的工作量非常繁重，更重要的是產生了大量的冗余代碼，從而使網頁容量劇增，瀏覽器加載緩慢。

三、兩種方式布局頁面的代碼對比

下面通過制作一個歌曲專輯列表頁面為例，來比較兩種方法布局網頁的區別。效果圖如下圖所示：

①使用CSS+ DIV布局代碼如下：

專輯語言：國語

專輯名稱：優秀兒歌精粹

歌手姓名：九通電CD

發行日期：2014年01月

專輯語言：國語