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

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

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

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

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

DIV；CSS；網(wǎng)頁設(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)頁，是一次設(shè)計(jì)思維方式的轉(zhuǎn)變，其能使頁面的結(jié)構(gòu)與表現(xiàn)相分離，這樣，同樣的內(nèi)容與結(jié)構(gòu)，就可以使用不同的CSS樣式實(shí)現(xiàn)不同的表現(xiàn)形式。通過定義CSS樣式的方法，可以在不更改頁面內(nèi)容和結(jié)構(gòu)的前提下，更換頁面的布局和表現(xiàn)效果［1］。

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

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

（二）CSS技術(shù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.CSS的引用方法。CSS樣式表按相對于文檔位置分為內(nè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)。其使用方法簡單，但由于需要為各個(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〉之間。此法僅適用于特殊頁面設(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è)頁面引用，后期維護(hù)容易實(shí)現(xiàn)、效率高，因此這種方法使用頻率最高。例如，〈linkhref="外部樣式表文件名.css"rel="stylesheet" type="text/css"〉。其中，href用于定義CSS文件的URL［5］，指明外部樣式相對路徑；rel="stylesheet"定義在網(wǎng)頁中使用外部樣式表；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)先級別。在一個(gè)網(wǎng)頁文檔中，可能會用到多種樣式表引用方法，瀏覽器在執(zhí)行樣式效果時(shí)，按樣式表的優(yōu)先級及樣式疊加原則實(shí)現(xiàn)。一般原則是：最接近目標(biāo)的樣式優(yōu)先級最高；高優(yōu)先級樣式將繼承低優(yōu)先級樣式未重疊定義，但覆蓋重疊的定義。優(yōu)先級如圖1所示：

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

（三）DIV+CSS布局方法。

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

圖2 CSS盒子模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、結(jié)語

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

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

［2］劉瑞新.網(wǎng)頁設(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)頁設(shè)計(jì)標(biāo)準(zhǔn)教程［M］.北京：人民郵電出版社，2012.

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

［6］李雙遠(yuǎn).DIV_CSS在網(wǎng)頁設(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ī)系講師，碩士，研究方向：圖像處理、動漫設(shè)計(jì)與制作、網(wǎng)站設(shè)計(jì)。