聞立鷗

摘要：隨著信息技術(shù)的飛速發(fā)展，網(wǎng)頁的制作技術(shù)也在不斷進(jìn)步，CSS+DIV是當(dāng)前網(wǎng)頁布局的主流技術(shù)，本文通過實(shí)例將CSS+DIV布局網(wǎng)頁與傳統(tǒng)的表格布局網(wǎng)頁進(jìn)行比較，清晰地驗(yàn)證了CSS+DIV技術(shù)布局網(wǎng)頁的高效工具。

關(guān)鍵詞：CSS；DIV；技術(shù)

中圖分類號：TN915.02 文獻(xiàn)標(biāo)志碼：A 文章編號：1674-9324（2014）37-0225-03

一、CSS+DIV布局簡介

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

二、表格布局網(wǎng)頁的問題

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

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

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

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

專輯語言：國語

專輯名稱：優(yōu)秀兒歌精粹

歌手姓名：九通電CD

發(fā)行日期：2014年01月

專輯語言：國語