基于DIV+CSS網(wǎng)頁布局技術(shù)的應(yīng)用研究

麥小霞

摘 要： DIV+CSS技術(shù)作為網(wǎng)頁布局的新寵，有著其獨(dú)特的優(yōu)勢(shì)，它把網(wǎng)頁的表現(xiàn)形式和內(nèi)容分離，能夠解決很多表格布局時(shí)產(chǎn)生的問題。介紹了DIV+CSS布局技術(shù)的概念、特點(diǎn)及其優(yōu)勢(shì)；通過一個(gè)具體的實(shí)例展示了DIV+CSS布局技術(shù)的應(yīng)用思路與核心技術(shù)。希望能幫助初學(xué)者初步認(rèn)識(shí)這種布局技術(shù)，為進(jìn)一步的學(xué)習(xí)打下基礎(chǔ)。

關(guān)鍵詞： DIV； CSS； 網(wǎng)頁布局； 網(wǎng)頁設(shè)計(jì)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2014）05-42-02

Abstract： DIV+CSS is a popular technology in page layout because of its own advantages. The form and the content of the page are separated so that it may solve many problems existing when we use table layout. The concept of DIV+CSS layout techniques and its characteristic advantages are introduced. Through a concrete example， the DIV+CSS layout technology application and the core technology are displayed to help the beginners understand this layout technology.

Key words： DIV； CSS； Web page layout； Web page design

0 引言

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展和Web2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，網(wǎng)頁布局不再以表格布局為主，而是向更規(guī)范的DIV+CSS布局方式轉(zhuǎn)變。因?yàn)镈IV+CSS布局方式解決了表格布局中的問題，把網(wǎng)頁的表現(xiàn)形式與內(nèi)容進(jìn)行分離，這樣做的好處是網(wǎng)頁后期的維護(hù)更加方便，網(wǎng)頁的代碼也簡(jiǎn)化了，并且提升了網(wǎng)頁的加載速度。因此，DIV+CSS技術(shù)的普及是趨勢(shì)。那么什么是DIV+CSS技術(shù)，它有什么樣的優(yōu)勢(shì)，如何使用該技術(shù)，本文將對(duì)此進(jìn)行探討，介紹DIV+CSS布局技術(shù)的基本知識(shí)，再通過實(shí)例介紹其結(jié)構(gòu)以及如何在網(wǎng)頁制作中應(yīng)用這種技術(shù)。

1 什么是DIV+CSS技術(shù)

網(wǎng)頁的頁面是一個(gè)整體，在進(jìn)行設(shè)計(jì)的時(shí)候必須從整體上去規(guī)劃它，也就是把整個(gè)頁面劃分成幾個(gè)區(qū)域，再對(duì)每個(gè)區(qū)域作進(jìn)一步的細(xì)節(jié)排版以及版式設(shè)計(jì)，最后就是用戶所看到的頁面效果。DIV+CSS布局技術(shù)就是按照上面的設(shè)計(jì)思路去制作網(wǎng)頁的一種技術(shù)。

DIV是HTML標(biāo)記中的塊級(jí)標(biāo)記，是一個(gè)提供結(jié)構(gòu)和背景的元素。CSS是用來表現(xiàn)文件樣式的腳本語言。DIV+CSS技術(shù)就是用DIV盒子模型把各部分內(nèi)容劃分到不同的區(qū)塊，然后通過CSS樣式來定義盒子的位置、大小、邊框、內(nèi)外邊距等。

2 DIV+CSS技術(shù)的優(yōu)勢(shì)

DIV+CSS布局方式解決了表格布局中的問題，主要體現(xiàn)在以下幾個(gè)方面。

⑴ 表現(xiàn)和內(nèi)容分離。HTML文件中只存放文本的信息，而設(shè)計(jì)部分的內(nèi)容則分離出來放在一個(gè)獨(dú)立的css樣式文件中，這樣的網(wǎng)站不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。

⑵ 代碼簡(jiǎn)化，頁面瀏覽速度提高。DIV+CSS布局的頁面的編碼一般只有表格布局的頁面編碼的二分之一，這樣的頁面瀏覽速度更快，帶寬成本更低，被搜索引擎搜索到的概率更高。

⑶ 維護(hù)和改版更加便捷。當(dāng)需要改變頁面風(fēng)格的時(shí)候，只需要修改CSS樣式即可，從而降低改版網(wǎng)站的成本，提高了效率。

YAHOO，網(wǎng)易，新浪等幾大門戶網(wǎng)站均采用DIV+CSS布局框架，這更加印證了這種技術(shù)有其獨(dú)特的優(yōu)勢(shì)，相信它的普及應(yīng)用也為期不遠(yuǎn)了。

3 DIV+CSS技術(shù)的應(yīng)用

下面以廣州華商職業(yè)學(xué)院的主頁設(shè)計(jì)為例子來講解DIV+CSS布局技術(shù)的具體應(yīng)用。

4 結(jié)束語

本文介紹了使用DIV+CSS布局技術(shù)進(jìn)行網(wǎng)頁設(shè)計(jì)的完整思路，給出了使用這種技術(shù)的過程，并且給出了核心代碼。通過本文的探討，相信初學(xué)者對(duì)DIV+CSS布局技術(shù)有了初步的了解。當(dāng)然，DIV+CSS布局技術(shù)包含的知識(shí)很多，在本文中都沒有提及。網(wǎng)頁布局的樣式非常多，如何通過這種技術(shù)實(shí)現(xiàn)不同的布局方式是筆者要進(jìn)一步研究的課題，這需要不斷地學(xué)習(xí)和更多的實(shí)踐。

參考文獻(xiàn)：

[1] 楊陽.DIV+CSS網(wǎng)站布局實(shí)錄[M].科學(xué)出版社，2009.

[2] 張志浩，李書明，趙玲.CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用探析[J].電腦知

識(shí)與技術(shù)，2007.10：30-36

[3] 周鑫.淺談DIV+CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].科技信息，

2011.17：84-85

[4] 梁靜琳.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].武漢工程職業(yè)

技術(shù)學(xué)院學(xué)報(bào)，2009.21（1）：42-45

[5] 夏曼.用DIV_CSS布局技術(shù)實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)[J].軟件導(dǎo)刊，2010.11：

132-134

[6] 楊芳菊.DIV+CSS布局可視化嘗試[J].電腦知識(shí)與技術(shù)，2008.8：

1821-1825

[7] 韓竹萍.DIV+CSS網(wǎng)頁排版技術(shù)探討[J].福建電腦，2013.2：

168-169

[8] 劉芳.基于DIV+CSS技術(shù)的網(wǎng)頁設(shè)計(jì)優(yōu)化方法[J].無線互聯(lián)科技，

2013.12：24

[9] 李忠健.淺談table+css和div+css的區(qū)別[J].科技資訊，2010.14：19