聞立鷗

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

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

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

一、CSS+DIV布局簡(jiǎn)介

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

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

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

三、兩種方式布局頁(yè)面的代碼對(duì)比

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

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

專(zhuān)輯語(yǔ)言：國(guó)語(yǔ)

專(zhuān)輯名稱(chēng)：優(yōu)秀兒歌精粹

歌手姓名：九通電CD

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

專(zhuān)輯語(yǔ)言：國(guó)語(yǔ)