鄒壽春（閩西職業(yè)技術(shù)學(xué)院計(jì)算機(jī)系 福建龍巖 364021）

基于DIV+CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)研究

鄒壽春
（閩西職業(yè)技術(shù)學(xué)院計(jì)算機(jī)系 福建龍巖 364021）

DIV+CSS技術(shù)日趨成熟，它已經(jīng)廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，并成為網(wǎng)頁(yè)布局的主流技術(shù)。文章介紹了DIV+CSS技術(shù)基礎(chǔ)及特點(diǎn)，并通過(guò)實(shí)例研究其使用規(guī)則和應(yīng)用技巧。實(shí)踐證明，DIV+CSS技術(shù)在網(wǎng)頁(yè)布局中靈活實(shí)用，為提高網(wǎng)頁(yè)設(shè)計(jì)效率奠定堅(jiān)實(shí)技術(shù)基礎(chǔ)。

DIV；CSS；網(wǎng)頁(yè)設(shè)計(jì)；布局

一、DIV+CSS技術(shù)基礎(chǔ)

傳統(tǒng)的html標(biāo)簽中，既有結(jié)構(gòu)標(biāo)簽，也有表現(xiàn)標(biāo)簽。用DIV+CSS技術(shù)設(shè)計(jì)網(wǎng)頁(yè)，是一次設(shè)計(jì)思維方式的轉(zhuǎn)變，其能使頁(yè)面的結(jié)構(gòu)與表現(xiàn)相分離，這樣，同樣的內(nèi)容與結(jié)構(gòu)，就可以使用不同的CSS樣式實(shí)現(xiàn)不同的表現(xiàn)形式。通過(guò)定義CSS樣式的方法，可以在不更改頁(yè)面內(nèi)容和結(jié)構(gòu)的前提下，更換頁(yè)面的布局和表現(xiàn)效果［1］。

（一）DIV技術(shù)。DIV全稱為division，即“區(qū)分/劃分”的意思?！碊IV〉標(biāo)簽是塊級(jí)元素，用來(lái)為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景。HTML文檔中的塊由對(duì)應(yīng)的一組起始標(biāo)簽〈DIV〉和結(jié)束標(biāo)簽〈/DIV〉構(gòu)成，其定位一般由〈DIV〉標(biāo)簽屬性或引用CSS樣式實(shí)現(xiàn)。

DIV標(biāo)簽定義的塊是可以被嵌套的，用于布局復(fù)雜的網(wǎng)頁(yè)。因此，這為網(wǎng)頁(yè)布局提供了有利技術(shù)支持。另外，在所構(gòu)成的塊中，可以放置文字、圖像和表格等各種網(wǎng)頁(yè)元素，方便對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)。

（二）CSS技術(shù)。

1.CSS基礎(chǔ)。CSS是Cascading Style Sheets的英文縮寫，中文翻譯為層疊樣式表，簡(jiǎn)稱樣式表，它是W3C組織制定的，用于控制（加強(qiáng)）網(wǎng)頁(yè)內(nèi)容顯示效果的一種標(biāo)記性語(yǔ)言。樣式就是格式，用于設(shè)置顯示內(nèi)容的樣式；層疊是指當(dāng)在HTML文檔中引用多個(gè)定義樣式的樣式文件（CSS文件）時(shí)，若多個(gè)樣式文件間所定義的樣式發(fā)生沖突，將依據(jù)層次順序進(jìn)行處理［2］。

CSS語(yǔ)法為：選擇器{屬性1：屬性值1；屬性2：屬性值2；……}

2.CSS選擇器類型。選擇器是用來(lái)定義CSS樣式的名稱，根據(jù)其構(gòu)成形式不同，可分為基本型選擇器、特殊型選擇器兩類。其中，基本型選擇器有標(biāo)簽選擇器、類選擇器和ID選擇器三種；特殊型選擇器主要由三類基本選擇器演變生成，主要有組合選擇器、群組選擇器、后代選擇器、子選擇器、相鄰選擇器、屬性選擇器、偽類選擇器和通配符選擇器。

（1）基本型選擇器介紹：

標(biāo)簽選擇器：以HTML文檔標(biāo)簽作為選擇器，文檔中對(duì)應(yīng)標(biāo)簽自動(dòng)應(yīng)用所定義屬性效果。例，p{color：blue；font-size：14px；…}

類選擇器：以“.”開(kāi)頭，緊接一個(gè)由用戶自定義字符串，合在一起組成類選擇器。類選擇器使用極靈活，引用時(shí)只要設(shè)置對(duì)應(yīng)標(biāo)簽class屬性值即可。例，top{width：100％；height：26px；…}

ID選擇器：以“#”開(kāi)頭，緊接一個(gè)由用戶自定義字符串，合在一起組成ID選擇器。由于id屬性的值在文檔中是唯一的，所以ID選擇器只能在文檔中被引用一次。例，#contain {width：780px；text-align：left；…}

（2）特殊型選擇器介紹：

組合選擇器：由兩個(gè)選擇器構(gòu)成，第一個(gè)必須為標(biāo)簽選擇器，第二個(gè)必須是類選擇器或者ID選擇器，兩個(gè)選擇器中間不能有空格。形如p.special{…}

群組選擇器：是CSS的一種簡(jiǎn)化寫法，將定義了具有相同樣式的多個(gè)選擇器合并為一個(gè)樣式，選擇器間用“，”隔開(kāi)。形如div，span，img{…}

后代選擇器：父代選擇器與后代選擇器間用空格分開(kāi)，只有當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層的標(biāo)簽才能適用此樣式定義。形如pspan{…}

子選擇器：父代選擇器與子選擇器間用“〉”號(hào)分開(kāi)，子選擇器只能控制最近的子元素。形如#main〉span{…}

相鄰選擇器：用“+”號(hào)分開(kāi)，相鄰兩選擇器在文檔目錄結(jié)構(gòu)樹(shù)中處同一層次，有共同的父元素。形如div+p{…}

屬性選擇器：可根據(jù)元素的屬性及屬性值來(lái)選擇元素。形如img［alt］{…}

偽類選擇器：主要有動(dòng)態(tài)偽類、UI元素狀態(tài)偽類、Nth結(jié)構(gòu)偽類三種［3］。形如a：active{…}

通配符選擇器：用于定義文檔中各種標(biāo)簽的共同屬性。形如*{…}

3.CSS的引用方法。CSS樣式表按相對(duì)于文檔位置分為內(nèi)部樣式與外部樣式，其被引用方法多樣，歸納起來(lái)有以下四種：行內(nèi)式、內(nèi)嵌式、鏈接式和導(dǎo)入式［4］。其中行內(nèi)式及內(nèi)嵌式引用的為內(nèi)部樣式，鏈接式和導(dǎo)入式引用的為外部樣式。外部樣式是一單獨(dú)的文本文件（擴(kuò)展名為.css），內(nèi)容為定義好的所有CSS代碼。

方法一，行內(nèi)式。作為標(biāo)簽style屬性值的方式，直接定義在標(biāo)簽行內(nèi)。其使用方法簡(jiǎn)單，但由于需要為各個(gè)標(biāo)簽設(shè)置style屬性值，后期維護(hù)效率低，文檔篇幅大，因此行內(nèi)式樣式表使用較少。例如，〈pstyle="color：#FF00FF；"〉…〈/p〉

方法二，內(nèi)嵌式。將所有CSS樣式代碼集中在〈style〉和〈/style〉標(biāo)簽內(nèi)進(jìn)行聲明，置于文檔頭部〈head〉與〈/head〉之間。此法僅適用于特殊頁(yè)面設(shè)置單獨(dú)的樣式風(fēng)格，如用于定義整個(gè)網(wǎng)站風(fēng)格，則操作及維護(hù)依然麻煩。例如，〈style type="text/css"〉#top1{font-weight：bold； }…〈/style〉

方法三，鏈接式。在文檔頭部〈head〉與〈/head〉之間，用〈link〉鏈接外部樣式文件。這種方法實(shí)現(xiàn)html文檔與CSS代碼完全分離，且外部樣式文件可以被多個(gè)頁(yè)面引用，后期維護(hù)容易實(shí)現(xiàn)、效率高，因此這種方法使用頻率最高。例如，〈linkhref="外部樣式表文件名.css"rel="stylesheet" type="text/css"〉。其中，href用于定義CSS文件的URL［5］，指明外部樣式相對(duì)路徑；rel="stylesheet"定義在網(wǎng)頁(yè)中使用外部樣式表；type="text/css"定義文件的類型為樣式表文件。

方法四，導(dǎo)入式。在文檔頭部采用@import方式導(dǎo)入外部樣式表，當(dāng)html文檔初始化時(shí)，才導(dǎo)入外部樣式表到html文檔內(nèi)，作為文件的一部分，此時(shí)類似內(nèi)嵌樣式表的效果。例如，@import url（“外部樣式表文件名.css”）。

4.CSS的優(yōu)先級(jí)別。在一個(gè)網(wǎng)頁(yè)文檔中，可能會(huì)用到多種樣式表引用方法，瀏覽器在執(zhí)行樣式效果時(shí)，按樣式表的優(yōu)先級(jí)及樣式疊加原則實(shí)現(xiàn)。一般原則是：最接近目標(biāo)的樣式優(yōu)先級(jí)最高；高優(yōu)先級(jí)樣式將繼承低優(yōu)先級(jí)樣式未重疊定義，但覆蓋重疊的定義。優(yōu)先級(jí)如圖1所示：

圖1 CSS的優(yōu)先級(jí)別

（三）DIV+CSS布局方法。

1.DIV+CSS盒模型。盒模型將頁(yè)面中的每個(gè)元素看做一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。網(wǎng)頁(yè)就是由許多個(gè)盒子通過(guò)不同的排列方式（縱向排列、橫向排列和嵌套排列）堆積而成［6］。

圖2 CSS盒子模型

2.DIV+CSS定位。定位是網(wǎng)頁(yè)布局的最重要的技術(shù)，CSS定位通過(guò)position屬性的值實(shí)現(xiàn)，屬性值有以下4種，分別為：static、relative、absolute、fixed。

static：靜態(tài)定位；為默認(rèn)值，為無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則，此時(shí)盒子按照普通布局在頁(yè)面上顯示。

relative：相對(duì)定位；使用該屬性值時(shí)盒子仍然是普通布局，占據(jù)它所在的位置，在計(jì)算定位的時(shí)候，才通過(guò)left，right，top，bottom等屬性，讓這個(gè)盒子相對(duì)于它的原始起點(diǎn)進(jìn)行移動(dòng)后顯示。

absolute：絕對(duì)定位；絕對(duì)定位的盒子的位置相對(duì)于最接近的一個(gè)具有定位屬性的父塊進(jìn)行的，如果沒(méi)有已定位的父塊，則相對(duì)于body對(duì)象，即瀏覽器窗口。絕對(duì)定位的元素拋開(kāi)了文檔排列布局，相當(dāng)于游離于文檔頁(yè)面之上，所以各對(duì)象會(huì)相互覆蓋，而其層疊順序可由z-index屬性改變。

fixed：固定定位；與absolute相似，但它僅相對(duì)于瀏覽器窗口進(jìn)行定位，固定在瀏覽器的某個(gè)位置，不隨滾動(dòng)條的滾動(dòng)而滾動(dòng)。

3.盒子浮動(dòng)。采用上述定位方式，盒子并未脫離文檔流的控制，排列仍受很大限制。而用用盒子浮動(dòng)技術(shù)，能使盒子脫離文檔流向左或向右移動(dòng)，排列方式多樣，布局靈活方便。浮動(dòng)的元素會(huì)生成一個(gè)塊級(jí)框，它可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。盒子浮?dòng)通過(guò)設(shè)置float屬性值實(shí)現(xiàn)，屬性值有以下3種：none、left、right。其中none表示不浮動(dòng)；left表示浮在左邊；right表示浮在右邊。

有時(shí)，浮動(dòng)使用不當(dāng)會(huì)導(dǎo)致頁(yè)面出現(xiàn)錯(cuò)位的情況，這時(shí)可以使用清除浮動(dòng)的方法。清除浮動(dòng)不僅能夠解決頁(yè)面錯(cuò)位的問(wèn)題，還能解決子級(jí)元素浮動(dòng)導(dǎo)致父級(jí)元素背景無(wú)法自適應(yīng)子級(jí)元素高度的問(wèn)題。清除浮動(dòng)通過(guò)設(shè)置clear屬性值實(shí)現(xiàn)，屬性值有以下4種：none、left、right、both。其中none表示允許兩邊都可以有浮動(dòng)對(duì)象；left表示不允許左邊有浮動(dòng)對(duì)象；right表示不允許右邊有浮動(dòng)對(duì)象；both表示不允許有浮動(dòng)對(duì)象。

（四）DIV+CSS技術(shù)優(yōu)勢(shì)。與傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)相比，DIV+CSS技術(shù)有明顯優(yōu)勢(shì)。

1.頁(yè)面瀏覽速度更快。由于將大部分頁(yè)面代碼寫在了CSS當(dāng)中，使得頁(yè)面體積容量大大縮減。

2.保持站點(diǎn)風(fēng)格一致性。使用DIV+CSS的技術(shù)，將所有頁(yè)面用同一CSS文件控制，避免了不同區(qū)域或不同頁(yè)面體現(xiàn)出的效果偏差。

3.網(wǎng)站改版與維護(hù)更方便。維護(hù)人員只需修改外部樣式文件內(nèi)容即可，提高了工作效率。

4.更好地被搜索引擎收錄。由于樣式表寫入了獨(dú)立CSS文件中，這就使得網(wǎng)頁(yè)中正文部分更為突出明顯，便于被搜索引擎采集收錄。

5.更利于團(tuán)隊(duì)分工合作。采用DIV+CSS技術(shù)，使內(nèi)容和表現(xiàn)分離，在團(tuán)隊(duì)開(kāi)發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

二、頁(yè)面布局設(shè)計(jì)與實(shí)現(xiàn)

在網(wǎng)頁(yè)設(shè)計(jì)制作中，對(duì)頁(yè)面進(jìn)行布局非常重要，這是合理安排頁(yè)面內(nèi)容，突出重點(diǎn)信息的前提。此處通過(guò)實(shí)例研究用DIV+CSS技術(shù)進(jìn)行頁(yè)面布局與實(shí)現(xiàn)的過(guò)程。下圖為某網(wǎng)頁(yè)布局結(jié)構(gòu)圖：

圖3 CSS頁(yè)面布局結(jié)構(gòu)

網(wǎng)頁(yè)布局采用上中下型結(jié)構(gòu)，將頁(yè)面分成頭部（header）、主體（mainer）和底部（footer）三大內(nèi)容塊，然后對(duì)每塊再分小塊。在設(shè)計(jì)時(shí)，首先生成兩個(gè)文件：index.htm l和sty.css，采用鏈接式方法將引外部樣式表sty.css引用到index.htm l文檔中。以下是實(shí)現(xiàn)此布局代碼。

（一）網(wǎng)頁(yè)文件index.html內(nèi)代碼。

三、結(jié)語(yǔ)

與傳統(tǒng)表格布局方法相比，采用DIV+CSS技術(shù)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)布局，實(shí)現(xiàn)內(nèi)容和表現(xiàn)分離，使網(wǎng)頁(yè)設(shè)計(jì)、改版及后期維護(hù)都變得更加方便快捷，提高了工作效率。使用DIV+CSS技術(shù)創(chuàng)建的站點(diǎn)代碼簡(jiǎn)潔、結(jié)構(gòu)合理，優(yōu)勢(shì)明顯?，F(xiàn)在該技術(shù)已被廣大網(wǎng)頁(yè)設(shè)計(jì)者所采用，它必將推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)前進(jìn)一大步。

［1］鄒欣.DIV+CSS商業(yè)案例與網(wǎng)頁(yè)布局開(kāi)發(fā)精講［M］.北京：中國(guó)鐵道出版社，2010.

［2］劉瑞新.網(wǎng)頁(yè)設(shè)計(jì)與制作教程HTML+CSS+JavaScript ［M］.北京：機(jī)械工業(yè)出版社，2013.

［3］大漠.CSS3選擇器——偽類選擇器［EB/OL］.http://www.w3cplus.com/css3/pseudo-class-selector.2011-08-16.

［4］溫謙.CSS網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)教程［M］.北京：人民郵電出版社，2012.

［5］朱印宏.CSS商業(yè)網(wǎng)站布局之道［M］.北京：清華大學(xué)出版社，2007.

［6］李雙遠(yuǎn).DIV_CSS在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用方法［J］.吉林化工學(xué)院學(xué)報(bào)，2013（9）.

［責(zé)任編輯 鄭麗娟］

TP393

A

2095-0438（2015）09-0148-04

2015-05-12

鄒壽春（1978-），男，福建連城人，閩西職業(yè)技術(shù)學(xué)院計(jì)算機(jī)系講師，碩士，研究方向：圖像處理、動(dòng)漫設(shè)計(jì)與制作、網(wǎng)站設(shè)計(jì)。