李雙遠(yuǎn)，李阿輝

(吉林化工學(xué)院信息中心，吉林吉林132022)

DIV全稱division意為“區(qū)塊、分割”，DIV標(biāo)簽是一個(gè)無(wú)意義的容器標(biāo)簽，用于將頁(yè)面劃分出不同的區(qū)域.通過DIV將復(fù)雜的頁(yè)面進(jìn)行細(xì)分塊，可以將問題細(xì)分一個(gè)一個(gè)解決，所以通過DIV將頁(yè)面分塊是一個(gè)關(guān)鍵的工作，也是決定最終效果與質(zhì)量的前提.

CSS(Cascading Style Sheet)，中文翻譯為層疊樣式表，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言.CSS的引入就是為了使得HTML語(yǔ)言能夠更好地適應(yīng)頁(yè)面的美工設(shè)計(jì)并且隨即引發(fā)了網(wǎng)頁(yè)設(shè)計(jì)的潮流，使用CSS設(shè)計(jì)的優(yōu)秀頁(yè)面層出不窮［1-3］.

1 CCS樣式的基礎(chǔ)應(yīng)用

1.1 CSS控制頁(yè)面的方式

·行內(nèi)樣式

＜div style="屬性1:值1;屬性2:值2;"＞＜/div＞

行內(nèi)樣式一般用于需要單獨(dú)控制的元素，因?yàn)樾袃?nèi)樣式的優(yōu)先級(jí)是最高的.

·嵌入樣式

＜style type="text/css"＞

選擇器{屬性1:值1;屬性2:值2;}

＜/style＞

嵌入樣式一般是直接寫在html文檔頭部的一種樣式，為了文檔的整潔性和易于控制操作性，當(dāng)需要寫大量樣式代碼的時(shí)候，是不用嵌入樣式的.

·外部樣式

＜link rel="stylesheet"type="text/css"href="url"＞

這段代碼是放在html文檔頭部的，用于調(diào)用外部的樣式.前面兩種樣式我們一般都不用于有大量樣式代碼的情況，那么這種方式當(dāng)選最為合適.

·導(dǎo)入樣式

@import url(外部樣式表位置);

·優(yōu)先級(jí)別:

-行內(nèi)樣式表＞其他的樣式表

-其他的樣式表，優(yōu)先級(jí)一樣，按照導(dǎo)入的順序來確定他們是否起

作用.

1.2 CSS 選擇器

CSS控制樣式，那么CSS是怎么控制到元素的呢?這點(diǎn)正是因?yàn)镃SS具有強(qiáng)大且眾多的CSS選擇器，也正是因?yàn)閾碛斜姸噙x擇器，CSS才能夠運(yùn)用自如的承載樣式.下面是CSS所擁有的選擇器:

·id選擇器

-#idname

·類選擇器

-.classname

·標(biāo)簽選擇器

-tagname

·交叉選擇器

-tagname.classname tagname#idname

·群組選擇器

-多個(gè)選擇器用 “，”隔開

·后代選擇器(包含選擇器)

-父級(jí)和子級(jí)用空格隔開

·通用選擇器

-*{}

·子選擇器

-子選擇器用于選中元素的直接后代(即兒子)，它的定義符

號(hào)是大于號(hào)(＞)

body＞p{color:green;}

·相鄰選擇器

-相鄰選擇器的定義符號(hào)是加號(hào)(+)，相鄰選擇器將選中緊

跟在它后面的一個(gè)兄弟元素(這兩個(gè)元素具有共同的父元素)

h2+p{color:red;}

·屬性選擇器

-匹配屬性

a［name］{color:purple;}

div［border］{border-color:gray;}

2 DIV+CSS布局優(yōu)勢(shì)

目前電子商務(wù)網(wǎng)站發(fā)展很快，也推進(jìn)了網(wǎng)頁(yè)布局的發(fā)展，對(duì)布局的要求更加專業(yè)化，規(guī)范化，相比表格頁(yè)面，DIV+CSS有明顯的優(yōu)勢(shì).那么在介紹DIV+CSS與表格布局所擁有的優(yōu)勢(shì)之前，首先分別用表格和DIV+CSS來簡(jiǎn)單模擬這樣的效果:五個(gè)大小全為200pxX300px的塊，并且這五個(gè)塊中字體的顏色全為紫色，大小為14px.

2.1 用表格來實(shí)現(xiàn)

＜html＞

＜head＞＜title＞表格頁(yè)面＜/title＞

＜/head＞

＜body＞

＜table width="200"height="300"border=＇0＇

cellpadding= ＇0＇cellspacing= ＇0＇＞

＜tr width="200"height="300"＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體1＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體2＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體3＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體4＜ /font＞ ＜ /td＞

＜ td width= ＇200＇＞ ＜ font color= ＇purple＇size=＇2＇＞塊中字體5＜ /font＞ ＜ /td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

2.2 用DIV+CSS來布局

＜html＞

＜head＞

＜title＞DIV+CSS頁(yè)面＜/title＞

＜style type="text/css"＞

div{

padding:0px;

margin:0px;

width:200px;

height:300px;

color:purple;

font-size:14px;

float:left;

}

＜/style＞

＜/head＞

＜body＞

＜div＞塊中字體1＜/div＞

＜div＞塊中字體2＜/div＞

＜div＞塊中字體3＜/div＞

＜div＞塊中字體4＜/div＞

＜div＞塊中字體5＜/div＞

＜/body＞

＜/html＞

2.3 比較總結(jié)

從上面的代碼比較可以看出，用表格來實(shí)現(xiàn)上面的效果代碼是多冗余的.首先5個(gè)塊表格需要設(shè)置5次寬高，實(shí)現(xiàn)字體的顏色，也要對(duì)每個(gè)字體加已經(jīng)不常用的font標(biāo)簽，并且還得重復(fù)寫5次.那么，如果一個(gè)大商城有幾十甚至上百個(gè)樣式相同的內(nèi)容，用表格還重復(fù)寫幾十遍到上百遍?此時(shí)CSS樣式的高效率、易于維護(hù)、加載速度快等優(yōu)勢(shì)便淋漓盡致的展現(xiàn)出來.還有其中想要字體的大小是14px，然而font元素不具有這樣具體像素大小的屬性，這樣字體的大小也不是很順我們意的實(shí)現(xiàn).那么我們可以總結(jié)出DIV+CSS布局的一下優(yōu)勢(shì):

(1)彌補(bǔ)html標(biāo)簽的功能缺陷，可以使頁(yè)面的美工上升一個(gè)高度.

(2)加載速度快，節(jié)省更多流量.雖然表面上看加載一次并節(jié)省不了多少流量，但是當(dāng)你的頁(yè)面被加載10000次呢?節(jié)省流量可想而知.

(3)便于維護(hù)和管理，節(jié)省大量的人力和成本.一個(gè)頁(yè)面不可能一直不變，當(dāng)想對(duì)一個(gè)頁(yè)面做一些更改的時(shí)候，如果是表格布局的話就會(huì)很讓人頭疼，大量的冗余代碼需要一一更改.然而CSS只需要修改一下樣式便可.

(4)頁(yè)面結(jié)構(gòu)清晰，頁(yè)面內(nèi)容和表現(xiàn)分離.外部樣式單獨(dú)存在于一個(gè)文件中，互不影響.

另外DIV+CSS布局對(duì)搜索引擎更加友好，更有利于抓取和收取您的頁(yè)面.

3 DIV+CSS技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用實(shí)現(xiàn)

在前面我們已經(jīng)敘述了CSS樣式的基本應(yīng)用.那么在網(wǎng)頁(yè)布局中表格或其他塊都具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)等基本屬性，一個(gè)CSS盒子也具備這些屬性，盒子模型表達(dá)的很清楚.我們下面將用一個(gè)實(shí)例來闡述DIV+CSS在網(wǎng)頁(yè)中具體應(yīng)用實(shí)現(xiàn)方法.

DIV+CSS設(shè)計(jì)實(shí)例圖

圖中運(yùn)用的div+css技術(shù):

(1)網(wǎng)頁(yè)居中，運(yùn)用css中margin:0 auto;控制即可以使網(wǎng)頁(yè)居中，方便快捷.

(2)滑動(dòng)門技術(shù)，體現(xiàn)了css的強(qiáng)大功能.采用css+js和純css技術(shù)均能實(shí)現(xiàn)，這里用純css來實(shí)現(xiàn)滑動(dòng)門技術(shù).

CSS代碼:

#nav{

width:303px;

height:200px;

border:1px solid#CCCCCC;

}

#column a{

float:left;

width:100px;

border-right:1px solid#CCC;

border-bottom:1px solid#CCC;

font:bold 14px/30px Arial，Helvetica，sans-serif;

color:#000;

text-decoration:none;

text-align:center;

}

#contant{

width:303px;

height:162px;

overflow:hidden;

}

ul{

margin:0;

padding:0;

list-style-type:none;

padding:4px 0 0 5px;

}

li{

font-size:12px;

overflow:hidden;

padding-left:2px;

line-height:27px;

}

body內(nèi)部代碼:

＜div id="nav"＞

＜div id="column"＞ ＜a href="#one"＞企業(yè)新聞＜/a＞ ＜a href="#two"＞行業(yè)信息＜/a＞ ＜a href="#three" ＞產(chǎn)品介紹 ＜/a＞ ＜/div＞

＜div id="contant"＞

＜ul id="one"＞

＜li＞＜a href="#"＞滑動(dòng)門1 ＜/a＞＜/li＞

＜li＞＜a href="#"＞滑動(dòng)門1 ＜/a＞＜/li＞

＜li＞＜a href="#"＞滑動(dòng)門1 ＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門1 ＜/a＞＜/li＞＜/ul＞＜ul id="two"＞＜li＞＜a href="#"＞滑動(dòng)門2＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門2＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門2＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門2 ＜/a＞＜/li＞＜/ul＞＜ul id="three"＞＜li＞＜a href="#"＞滑動(dòng)門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門3＜/a＞＜/li＞＜li＞＜a href="#"＞滑動(dòng)門3＜/a＞＜/li＞＜/ul＞＜/div＞＜/div＞

(3)圖中錯(cuò)綜復(fù)雜的框架，運(yùn)用css樣式來實(shí)現(xiàn)比表格的嵌套簡(jiǎn)單方便很多，上面已經(jīng)比較過.

(4)輪播圖，運(yùn)用css+js技術(shù)來實(shí)現(xiàn).電子商務(wù)網(wǎng)站中都已經(jīng)離不開輪播圖的效果，直觀的動(dòng)態(tài)效果，多張圖片組合，具有很強(qiáng)的視覺沖擊，從而吸引訪問者.在這里可以看出css+div技術(shù)不僅單獨(dú)制作網(wǎng)頁(yè)，而且可以兼容其他網(wǎng)頁(yè)技術(shù)，豐富了建站技術(shù)及內(nèi)容，使頁(yè)面載入更快;可以降低網(wǎng)站流量費(fèi)用;設(shè)計(jì)師在設(shè)計(jì)時(shí)和修改時(shí)更有效率，而代價(jià)更低;使整個(gè)站點(diǎn)保持視覺的一致性.使用CSS的DIV排版方式使得數(shù)據(jù)與CSS文件完全分離，美工修改頁(yè)面時(shí)不需要關(guān)心后臺(tái)任何操作問題，而表格依賴各個(gè)單元格，美工必須在大量后臺(tái)代碼中尋找排版方式

4 結(jié) 論

DIV+CSS是web標(biāo)準(zhǔn)，目前廣泛的應(yīng)用也順應(yīng)發(fā)展潮流.與傳統(tǒng)的布局方式相比，DIV+CSS技術(shù)優(yōu)勢(shì)十分明顯，我們?cè)诶肈IV+CSS技術(shù)開發(fā)網(wǎng)頁(yè)時(shí)也能感覺到它在網(wǎng)頁(yè)布局中的魅力所在.對(duì)于網(wǎng)頁(yè)在美工上的表現(xiàn)技術(shù)又跨了一大步.

［1］ 杜靜.敖富江.Web編程入門經(jīng)典:HTML、XHTML和 CSS［M］.北京:清華大學(xué)出版社，2010.

［2］ (美)奧利弗，(美)莫里森.HTML與CSS入門經(jīng)典［M］.7版.北京:人民郵電出版社，2007.

［3］ 金峰.變幻之美-DivCSS網(wǎng)頁(yè)布局揭秘-案例實(shí)戰(zhàn)篇［M］.北京:人民郵電出版社，2009.