Div+css網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)現(xiàn)

謝振華

摘 要：從過(guò)去到現(xiàn)在，流行過(guò)幾種常用的網(wǎng)頁(yè)布局設(shè)計(jì)，但現(xiàn)在div+css的布局無(wú)疑是最流行的。Div+css之所以流行，是因?yàn)榫哂羞^(guò)去網(wǎng)頁(yè)布局所不具備的優(yōu)點(diǎn)，優(yōu)點(diǎn)體現(xiàn)在：網(wǎng)頁(yè)的內(nèi)容與表現(xiàn)形式分離。本文從div+css布局技術(shù)的概念和優(yōu)點(diǎn)開(kāi)始，后結(jié)合具體的例子，展示div+css布局的設(shè)計(jì)和實(shí)施過(guò)程。

關(guān)鍵詞：div+css；布局設(shè)計(jì)；網(wǎng)絡(luò)技術(shù)

中圖分類號(hào)： TP39 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 1673-1069（2016）11-151-2

0 引言

隨著web 網(wǎng)絡(luò)技術(shù)的發(fā)展，采用di+css布局設(shè)計(jì)逐漸開(kāi)始流行起來(lái)了。Div+css布局設(shè)計(jì)將web網(wǎng)頁(yè)的內(nèi)容和表現(xiàn)形式進(jìn)行分離，分離之后的表現(xiàn)形式可以以文件的形式進(jìn)行保存，而文件又可以讓更多的web網(wǎng)頁(yè)內(nèi)容進(jìn)行訪問(wèn)，以此達(dá)到表現(xiàn)形式可以在不同的網(wǎng)頁(yè)內(nèi)容之間進(jìn)行共享。去除了表現(xiàn)形式的網(wǎng)頁(yè)內(nèi)容，將比以前變得更加精簡(jiǎn)，這樣更利于搜索引擎搜索，提高web網(wǎng)頁(yè)的語(yǔ)義。

1 div+css介紹

Div是html標(biāo)記的一個(gè)常用標(biāo)簽，表示文檔中的一區(qū)塊，我們可以設(shè)置該區(qū)塊的大小，該塊里可以容納其他的標(biāo)記和子div區(qū)塊。Css，是層疊樣式表。通過(guò)它可以精確的控制html標(biāo)簽的表現(xiàn)形式，包括頁(yè)面的布局，背景和其他效果。Css可將網(wǎng)頁(yè)的所有表現(xiàn)形式完全與內(nèi)容脫離出來(lái)，css可以在行內(nèi)定義，頭部中定義，也可以在文件中定義。

2 div+css優(yōu)點(diǎn)

Div+css優(yōu)點(diǎn)有很多，這里主要說(shuō)出幾個(gè)必要的優(yōu)點(diǎn)，首先，內(nèi)容和表現(xiàn)形式分離，在html文件中存放網(wǎng)頁(yè)內(nèi)容，在css樣式文件中存放了表現(xiàn)形式。其次，提高客戶訪問(wèn)web網(wǎng)頁(yè)的速度，最后，與搜素引擎的關(guān)系更加友好，提高搜索引擎對(duì)網(wǎng)頁(yè)的搜索速度。

3 網(wǎng)站布局設(shè)計(jì)

①網(wǎng)站整體規(guī)劃。

做網(wǎng)站開(kāi)發(fā)之前，首先要做的是網(wǎng)站外在表現(xiàn)形式的規(guī)劃，我們稱之為整體規(guī)劃。整體規(guī)劃是確定網(wǎng)站分為幾個(gè)部分，一般都分為網(wǎng)頁(yè)頂部，網(wǎng)頁(yè)側(cè)邊欄，網(wǎng)頁(yè)中間內(nèi)容塊，網(wǎng)頁(yè)尾部等。設(shè)計(jì)如圖1所示：

②網(wǎng)頁(yè)代碼設(shè)計(jì)。

針對(duì)上面的網(wǎng)頁(yè)整體規(guī)劃，Index.Html文件代碼編寫(xiě)如下：

Exp.css文件如下：

* {padding： 0； margin： 0； }

body{width： 900px； margin：0 auto； #header{width： 900px； height： 100px；

#logo{width： 50%； height： 70px； #menu{width： 100%； height： 30px；

#nav{width： 180px； height： 300px； float： left； #main{width： 720px； height： 300px； float： left； #footer{width： 100%； height： 100px； clear： both；

③網(wǎng)頁(yè)代碼設(shè)計(jì)完成之后，我們把網(wǎng)頁(yè)更新成模板，審視網(wǎng)站不變的部分和變化的部分，一般情況下，header部分和footer部分都是不變的，其他部分是動(dòng)態(tài)變化的。

先把header部分和footer部分設(shè)計(jì)為單獨(dú)文件，分別為header.html和footer.html

header.html 如下：

主要文件改成：

④其他板塊設(shè)計(jì)要素也很重要，導(dǎo)航菜單一般采用div-ul-li 局部布局進(jìn)行樣式設(shè)計(jì)，圖文混排的布局采用div-dd-dt/dd 進(jìn)行設(shè)計(jì)，表單等一般采用div-form-table等，菜單設(shè)計(jì)代碼如下：

* { padding： 0；margin： 0； } body { width：900px；margin： 5px auto； } ul{ list-style： none； text-align： center； } ul li{ width： 100px；float： left；} ul li ul{ display： none；position： relative； } ul li：hover > ul { cursor： pointer； display： block； position： absolute； } ul li ul li{ width： 100px； float： none； }

4 小結(jié)

本文先介紹了div+css的布局技術(shù)，后結(jié)合一般情況，進(jìn)行了網(wǎng)站布局設(shè)計(jì)，最后升級(jí)為模板設(shè)計(jì)，并給出了相關(guān)的代碼，該文不僅對(duì)網(wǎng)絡(luò)整體設(shè)計(jì)進(jìn)行了布局，而且對(duì)局部也進(jìn)行了設(shè)計(jì)，該div+css網(wǎng)站設(shè)計(jì)流程就有很強(qiáng)的通用性，適合動(dòng)態(tài)網(wǎng)站前臺(tái)設(shè)計(jì)。現(xiàn)在動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)開(kāi)發(fā)有好幾種，能夠根據(jù)動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)開(kāi)發(fā)的特點(diǎn)，選取合適的靜態(tài)網(wǎng)站布局技術(shù)，模板技術(shù)是筆者以后研究的課題。

參 考 文 獻(xiàn)

[1] 曾順.精通div+css網(wǎng)頁(yè)樣式和布局[M].人民郵電出版社，2014.

[2] 劉西杰，夏晨.Div+CSS網(wǎng)頁(yè)樣式與布局從入門(mén)到精通[M].人民郵電出版社，2015.

[3] 溫謙，周建國(guó)，練源.網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化教程（HTML+CSS+DIV）[M].人民郵電出版社，2013.