DIV+CSS技術在網(wǎng)頁布局中的應用實現(xiàn)

李雙遠，李阿輝

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

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

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

1 CCS樣式的基礎應用

1.1 CSS控制頁面的方式

·行內(nèi)樣式

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

行內(nèi)樣式一般用于需要單獨控制的元素，因為行內(nèi)樣式的優(yōu)先級是最高的.

·嵌入樣式

＜style type="text/css"＞

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

＜/style＞

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

·外部樣式

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

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

·導入樣式

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

·優(yōu)先級別:

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

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

作用.

1.2 CSS 選擇器

CSS控制樣式，那么CSS是怎么控制到元素的呢?這點正是因為CSS具有強大且眾多的CSS選擇器，也正是因為擁有眾多選擇器，CSS才能夠運用自如的承載樣式.下面是CSS所擁有的選擇器:

·id選擇器

-#idname

·類選擇器

-.classname

·標簽選擇器

-tagname

·交叉選擇器

-tagname.classname tagname#idname

·群組選擇器

-多個選擇器用 “，”隔開

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

-父級和子級用空格隔開

·通用選擇器

-*{}

·子選擇器

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

號是大于號(＞)

body＞p{color:green;}

·相鄰選擇器

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

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

h2+p{color:red;}

·屬性選擇器

-匹配屬性

a［name］{color:purple;}

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

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

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

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

＜html＞

＜head＞＜title＞表格頁面＜/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頁面＜/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 比較總結

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

(1)彌補html標簽的功能缺陷，可以使頁面的美工上升一個高度.

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

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

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

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

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

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

DIV+CSS設計實例圖

圖中運用的div+css技術:

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

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

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="#"＞滑動門1 ＜/a＞＜/li＞

＜li＞＜a href="#"＞滑動門1 ＜/a＞＜/li＞

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

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

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

4 結 論

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

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

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

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