基于DIV+CSS技術(shù)網(wǎng)頁布局應(yīng)用與實(shí)踐

王聰+楊韶華

摘要：近年來隨著Web標(biāo)準(zhǔn)的普及，DIV+CSS技術(shù)在網(wǎng)頁布局中越來越多的使用，DIV+CSS技術(shù)在網(wǎng)頁設(shè)計(jì)與制作中所占的地位越來越高，傳統(tǒng)的使用表格（table）進(jìn)行的網(wǎng)頁布局方式逐漸被淘汰，在此背景下，該文通過一個(gè)網(wǎng)頁設(shè)計(jì)中最常見的網(wǎng)頁布局實(shí)例，解析DIV+CSS技術(shù)的應(yīng)用，為后續(xù)網(wǎng)頁布局設(shè)計(jì)時(shí)提出一種新的解決方案。

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）34-8128-01

隨著Web標(biāo)準(zhǔn)在國內(nèi)的逐漸普及及很多業(yè)內(nèi)人士的大力推行，很多網(wǎng)站已經(jīng)開始重構(gòu)。Web標(biāo)準(zhǔn)提出將網(wǎng)頁的內(nèi)容與表現(xiàn)分離，同事要求HTML文檔具有良好的結(jié)構(gòu)。因此需要拋棄傳統(tǒng)的表格（table）布局方式，采用DIV布局，并且使用CSS層疊式樣式表來實(shí)現(xiàn)頁面的外觀。

1 相關(guān)概念

DIV：DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。DIV元素是用來為HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。

CSS：CSS是英文Cascading Style Sheets的縮寫。CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。

DIV+CSS：DIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。

2 “國字形”網(wǎng)頁框架布局實(shí)例

“國字形”網(wǎng)頁布局在企業(yè)或頁面信息量較大網(wǎng)站首頁設(shè)計(jì)上經(jīng)常使用。如圖2所示。

根據(jù)“國字形”網(wǎng)頁設(shè)計(jì)圖將網(wǎng)頁頁面分為頂部、中間左側(cè)、中間內(nèi)容區(qū)、中間右側(cè)、底部五部分，中間左側(cè)mid_left，中間內(nèi)容區(qū)mid，中間右側(cè)mid_right，底部定義為bottom。

2.1基于“國字形”網(wǎng)頁框架的DIV代碼

根據(jù)“三字型”網(wǎng)頁設(shè)計(jì)框架，寫出DIV代碼為，構(gòu)建網(wǎng)頁基本框架。

2.2基于“國字形”網(wǎng)頁框架的CSS樣式表代碼

根據(jù)“國字型”網(wǎng)頁設(shè)計(jì)框架的DIV代碼，寫出相應(yīng)的CSS樣式表。

備注：1、“國字型”網(wǎng)頁頁面設(shè)計(jì)時(shí)基于1024*768的分辨率。因此所設(shè)計(jì)的網(wǎng)頁背景圖寬和高分別為950px，700px。2、樣式表中的 background-image屬性是指的是背景圖片，可以通過這個(gè)屬性設(shè)置相應(yīng)DIV的背景圖片。

3 結(jié)束語

本文介紹的二個(gè)使用DIV+CSS網(wǎng)頁框架布局實(shí)例是現(xiàn)今網(wǎng)絡(luò)中網(wǎng)站頁面常用的布局形式。通過使用DIV+CSS技術(shù)在網(wǎng)頁中的應(yīng)用，真正實(shí)現(xiàn)了網(wǎng)頁頁面、表現(xiàn)和行為的分離，提高了網(wǎng)站更新維護(hù)的效率，提高了網(wǎng)頁的瀏覽速度。

參考文獻(xiàn)：

[1] 梁靜琳.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].武漢工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2009（1）.

[2] 車元媛.基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用[J].電腦知識(shí)與技術(shù)，2011（9）.

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

[4] 鄭俊生，姜敏.使用DIV+CSS進(jìn)行網(wǎng)頁設(shè)計(jì)應(yīng)用研究[J].電腦開發(fā)與應(yīng)用，2008（9）.endprint

摘要：近年來隨著Web標(biāo)準(zhǔn)的普及，DIV+CSS技術(shù)在網(wǎng)頁布局中越來越多的使用，DIV+CSS技術(shù)在網(wǎng)頁設(shè)計(jì)與制作中所占的地位越來越高，傳統(tǒng)的使用表格（table）進(jìn)行的網(wǎng)頁布局方式逐漸被淘汰，在此背景下，該文通過一個(gè)網(wǎng)頁設(shè)計(jì)中最常見的網(wǎng)頁布局實(shí)例，解析DIV+CSS技術(shù)的應(yīng)用，為后續(xù)網(wǎng)頁布局設(shè)計(jì)時(shí)提出一種新的解決方案。

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）34-8128-01

隨著Web標(biāo)準(zhǔn)在國內(nèi)的逐漸普及及很多業(yè)內(nèi)人士的大力推行，很多網(wǎng)站已經(jīng)開始重構(gòu)。Web標(biāo)準(zhǔn)提出將網(wǎng)頁的內(nèi)容與表現(xiàn)分離，同事要求HTML文檔具有良好的結(jié)構(gòu)。因此需要拋棄傳統(tǒng)的表格（table）布局方式，采用DIV布局，并且使用CSS層疊式樣式表來實(shí)現(xiàn)頁面的外觀。

1 相關(guān)概念

DIV：DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。DIV元素是用來為HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。

CSS：CSS是英文Cascading Style Sheets的縮寫。CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。

DIV+CSS：DIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。

2 “國字形”網(wǎng)頁框架布局實(shí)例

“國字形”網(wǎng)頁布局在企業(yè)或頁面信息量較大網(wǎng)站首頁設(shè)計(jì)上經(jīng)常使用。如圖2所示。

根據(jù)“國字形”網(wǎng)頁設(shè)計(jì)圖將網(wǎng)頁頁面分為頂部、中間左側(cè)、中間內(nèi)容區(qū)、中間右側(cè)、底部五部分，中間左側(cè)mid_left，中間內(nèi)容區(qū)mid，中間右側(cè)mid_right，底部定義為bottom。

2.1基于“國字形”網(wǎng)頁框架的DIV代碼

根據(jù)“三字型”網(wǎng)頁設(shè)計(jì)框架，寫出DIV代碼為，構(gòu)建網(wǎng)頁基本框架。

2.2基于“國字形”網(wǎng)頁框架的CSS樣式表代碼

根據(jù)“國字型”網(wǎng)頁設(shè)計(jì)框架的DIV代碼，寫出相應(yīng)的CSS樣式表。

備注：1、“國字型”網(wǎng)頁頁面設(shè)計(jì)時(shí)基于1024*768的分辨率。因此所設(shè)計(jì)的網(wǎng)頁背景圖寬和高分別為950px，700px。2、樣式表中的 background-image屬性是指的是背景圖片，可以通過這個(gè)屬性設(shè)置相應(yīng)DIV的背景圖片。

3 結(jié)束語

本文介紹的二個(gè)使用DIV+CSS網(wǎng)頁框架布局實(shí)例是現(xiàn)今網(wǎng)絡(luò)中網(wǎng)站頁面常用的布局形式。通過使用DIV+CSS技術(shù)在網(wǎng)頁中的應(yīng)用，真正實(shí)現(xiàn)了網(wǎng)頁頁面、表現(xiàn)和行為的分離，提高了網(wǎng)站更新維護(hù)的效率，提高了網(wǎng)頁的瀏覽速度。

參考文獻(xiàn)：

[1] 梁靜琳.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].武漢工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2009（1）.

[2] 車元媛.基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用[J].電腦知識(shí)與技術(shù)，2011（9）.

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

[4] 鄭俊生，姜敏.使用DIV+CSS進(jìn)行網(wǎng)頁設(shè)計(jì)應(yīng)用研究[J].電腦開發(fā)與應(yīng)用，2008（9）.endprint

摘要：近年來隨著Web標(biāo)準(zhǔn)的普及，DIV+CSS技術(shù)在網(wǎng)頁布局中越來越多的使用，DIV+CSS技術(shù)在網(wǎng)頁設(shè)計(jì)與制作中所占的地位越來越高，傳統(tǒng)的使用表格（table）進(jìn)行的網(wǎng)頁布局方式逐漸被淘汰，在此背景下，該文通過一個(gè)網(wǎng)頁設(shè)計(jì)中最常見的網(wǎng)頁布局實(shí)例，解析DIV+CSS技術(shù)的應(yīng)用，為后續(xù)網(wǎng)頁布局設(shè)計(jì)時(shí)提出一種新的解決方案。

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）34-8128-01

隨著Web標(biāo)準(zhǔn)在國內(nèi)的逐漸普及及很多業(yè)內(nèi)人士的大力推行，很多網(wǎng)站已經(jīng)開始重構(gòu)。Web標(biāo)準(zhǔn)提出將網(wǎng)頁的內(nèi)容與表現(xiàn)分離，同事要求HTML文檔具有良好的結(jié)構(gòu)。因此需要拋棄傳統(tǒng)的表格（table）布局方式，采用DIV布局，并且使用CSS層疊式樣式表來實(shí)現(xiàn)頁面的外觀。

1 相關(guān)概念

DIV：DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。DIV元素是用來為HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。

CSS：CSS是英文Cascading Style Sheets的縮寫。CSS能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。

DIV+CSS：DIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。

2 “國字形”網(wǎng)頁框架布局實(shí)例

“國字形”網(wǎng)頁布局在企業(yè)或頁面信息量較大網(wǎng)站首頁設(shè)計(jì)上經(jīng)常使用。如圖2所示。

根據(jù)“國字形”網(wǎng)頁設(shè)計(jì)圖將網(wǎng)頁頁面分為頂部、中間左側(cè)、中間內(nèi)容區(qū)、中間右側(cè)、底部五部分，中間左側(cè)mid_left，中間內(nèi)容區(qū)mid，中間右側(cè)mid_right，底部定義為bottom。

2.1基于“國字形”網(wǎng)頁框架的DIV代碼

根據(jù)“三字型”網(wǎng)頁設(shè)計(jì)框架，寫出DIV代碼為，構(gòu)建網(wǎng)頁基本框架。

2.2基于“國字形”網(wǎng)頁框架的CSS樣式表代碼

根據(jù)“國字型”網(wǎng)頁設(shè)計(jì)框架的DIV代碼，寫出相應(yīng)的CSS樣式表。

備注：1、“國字型”網(wǎng)頁頁面設(shè)計(jì)時(shí)基于1024*768的分辨率。因此所設(shè)計(jì)的網(wǎng)頁背景圖寬和高分別為950px，700px。2、樣式表中的 background-image屬性是指的是背景圖片，可以通過這個(gè)屬性設(shè)置相應(yīng)DIV的背景圖片。

3 結(jié)束語

本文介紹的二個(gè)使用DIV+CSS網(wǎng)頁框架布局實(shí)例是現(xiàn)今網(wǎng)絡(luò)中網(wǎng)站頁面常用的布局形式。通過使用DIV+CSS技術(shù)在網(wǎng)頁中的應(yīng)用，真正實(shí)現(xiàn)了網(wǎng)頁頁面、表現(xiàn)和行為的分離，提高了網(wǎng)站更新維護(hù)的效率，提高了網(wǎng)頁的瀏覽速度。

參考文獻(xiàn)：

[1] 梁靜琳.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].武漢工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2009（1）.

[2] 車元媛.基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用[J].電腦知識(shí)與技術(shù)，2011（9）.

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

[4] 鄭俊生，姜敏.使用DIV+CSS進(jìn)行網(wǎng)頁設(shè)計(jì)應(yīng)用研究[J].電腦開發(fā)與應(yīng)用，2008（9）.endprint