DIV+CSS技術(shù)在誠(chéng)欣電子商城系統(tǒng)中的應(yīng)用研究

張俊蘭，何婧媛，葉 倩

（延安大學(xué) 計(jì)算機(jī)學(xué)院，陜西 延安 716000）

DIV+CSS技術(shù)在誠(chéng)欣電子商城系統(tǒng)中的應(yīng)用研究

張俊蘭，何婧媛，葉 倩

（延安大學(xué) 計(jì)算機(jī)學(xué)院，陜西 延安 716000）

以DIV+CSS技術(shù)在誠(chéng)欣電子商城系統(tǒng)中的應(yīng)用為切入點(diǎn)對(duì)DIV+CSS技術(shù)進(jìn)行深入的探討。首先對(duì)DIV+CSS網(wǎng)頁(yè)重構(gòu)技術(shù)進(jìn)行了討論；然后對(duì)DIV和CSS技術(shù)在誠(chéng)欣電子商城系統(tǒng)的頁(yè)面設(shè)計(jì)中的應(yīng)用進(jìn)行了分析與討論，同時(shí)給出了具體的實(shí)現(xiàn)代碼；最后在DIV+CSS技術(shù)在誠(chéng)欣電子商城系統(tǒng)中的應(yīng)用的基礎(chǔ)上對(duì)DIV+CSS技術(shù)進(jìn)行了解析，并總結(jié)出了DIV+CSS布局網(wǎng)站的優(yōu)點(diǎn)和缺陷。

DIV+CSS網(wǎng)頁(yè)重構(gòu)；WEB標(biāo)準(zhǔn)；DIV+CSS布局；表現(xiàn)與行為

Internet的誕生和發(fā)展，改變了人們的生活方式，改變了企業(yè)的生產(chǎn)管理和經(jīng)營(yíng)方式，帶來(lái)商業(yè)模式的創(chuàng)新，推動(dòng)了信息經(jīng)濟(jì)的發(fā)展。電子商務(wù)成為21世紀(jì)的主要經(jīng)濟(jì)增長(zhǎng)方式，這種方式正在以難以置信的速度滲透到人們的日常生活，給人們的生產(chǎn)、生活帶來(lái)了極大地便利。隨著WEB2.0標(biāo)準(zhǔn)化[1]設(shè)計(jì)理念的普及，國(guó)內(nèi)很多大型門戶網(wǎng)站已經(jīng)紛紛采用DIV+CSS制作方法，從實(shí)際應(yīng)用情況來(lái)看，此種方法絕對(duì)好于表格制作頁(yè)面的方法?；赪EB標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)的核心在于如何使用眾多WEB標(biāo)準(zhǔn)中的各項(xiàng)技術(shù)來(lái)達(dá)到表現(xiàn)與內(nèi)容的分離，即網(wǎng)站的結(jié)構(gòu)、表現(xiàn)和行為三者的分離。只有真正實(shí)現(xiàn)了結(jié)構(gòu)分離的網(wǎng)頁(yè)設(shè)計(jì)，才能真正意義上符合WEB標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)。此次設(shè)計(jì)主要是對(duì)WEB標(biāo)準(zhǔn)的理論的一次實(shí)踐與運(yùn)用，也就是網(wǎng)站設(shè)計(jì)過(guò)程中靈活使用WEB標(biāo)準(zhǔn)對(duì)WEB內(nèi)容進(jìn)行結(jié)構(gòu)、表現(xiàn)與行為的分離——即表現(xiàn)和內(nèi)容分離的，用最科學(xué)、最合理的結(jié)構(gòu)來(lái)構(gòu)建網(wǎng)站。所以最終采取DIV+CSS技術(shù)布局[2]的方式實(shí)現(xiàn)設(shè)計(jì)效果。從整個(gè)設(shè)計(jì)與實(shí)現(xiàn)的工程中，我們可以窺見(jiàn)DIV+CSS對(duì)頁(yè)面布局的優(yōu)勢(shì)，這種優(yōu)勢(shì)是由DIV+CSS本身所具有的功能決定的。

1 DIV+CSS網(wǎng)頁(yè)重構(gòu)技術(shù)

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)[3]（或稱”WEB標(biāo)準(zhǔn)”）中常用術(shù)語(yǔ)之一，通常為了說(shuō)明與HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。

CSS是英語(yǔ)Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來(lái)表現(xiàn)HTML或XML等文件式樣的計(jì)算機(jī)語(yǔ)言。XHTML語(yǔ)言就是一種可以將HTML語(yǔ)言標(biāo)準(zhǔn)化，用XHTML語(yǔ)言重寫后的HTML頁(yè)面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁(yè)更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。CSS優(yōu)于HTML的好處關(guān)鍵就在于其與腳本語(yǔ)言（如Javascript）[4-6]及 XML 技術(shù)的融合，即 CSS+Javascript+XML。 自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無(wú)章的惡夢(mèng)，開始將頁(yè)面內(nèi)容與樣式分離。

DIV元素是用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。DIV是HTML（超文本語(yǔ)言）中的一個(gè)元素，DIV+CSS是一種網(wǎng)頁(yè)的布局方法，這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的table布局，真正地達(dá)到了W3C內(nèi)容與表現(xiàn)相分離。DIV是標(biāo)簽CSS是層疊樣式表。

DIV+CSS高級(jí)布局已逐漸流行，但面對(duì)所謂DIV+CSS布局的叫法讓人更為擔(dān)心，不要讓DIV成為Table的替代品，多層嵌套的DIV會(huì)嚴(yán)重影響代碼的可閱讀性，因此要學(xué)會(huì)活用HTML為我們提供的標(biāo)簽。DIV更適用于大體框架的定位，例如我們要定義一塊頭部的區(qū)域，一般會(huì)定義一個(gè)DIV。當(dāng)然，可以用class來(lái)定義，但一般來(lái)講如不是在同一頁(yè)面會(huì)重復(fù)的元素，用id能更好的區(qū)別開來(lái)。定義代碼如下：

定義了最上面的導(dǎo)航（ul部分），它沒(méi)有使用DIV來(lái)做頂部的框架，但卻很好的說(shuō)明了這些代碼的用途。因?yàn)樗钣昧薍TML提供的標(biāo)簽，以及樣式名稱的定義。

最常用的布局標(biāo)簽有：

1）h1：這個(gè)標(biāo)簽顯示的字體是很＂大＂的，它所能表達(dá)的意思就如同它原先的作用一樣明顯（大標(biāo)題）。

2）ul：這個(gè)標(biāo)簽很多情況是用來(lái)定義導(dǎo)航部分的，當(dāng)然也可以用ol來(lái)代替，但導(dǎo)航連接沒(méi)有什么順序之分，所以還是用ul來(lái)的比較確切（去掉CSS后效果更明顯）。

3）b：這個(gè)是一個(gè)已經(jīng)不再推薦使用的標(biāo)簽，但在布局上卻能帶來(lái)不少方便（因?yàn)槎蹋?，有些時(shí)候（比如細(xì)小地方的布局定義）是不錯(cuò)的選擇。

4）h2：h2使用最多的地方不是布局上，而是副標(biāo)題，但有些地方需要定義欄目樣式的話，用這個(gè)標(biāo)簽比較合適，欄目?jī)?nèi)容就使用p。

2 DIV+CSS技術(shù)在軟件系統(tǒng)中的應(yīng)用

2.1 前臺(tái)頁(yè)面設(shè)計(jì)中的應(yīng)用

誠(chéng)欣電子商城系統(tǒng)的前臺(tái)分為商品查詢、商品展臺(tái)、購(gòu)物車、會(huì)員管理、收銀臺(tái)、訂單管理及商城公告等7個(gè)部分，其中各個(gè)部分及其包括的具體功能模塊[5]如圖1所示。

圖1 誠(chéng)欣電子商城系統(tǒng)前臺(tái)軟件結(jié)構(gòu)圖Fig.1 Front software structure of Cheng Xin Electronic Mall System

誠(chéng)欣電子商城系統(tǒng)的前臺(tái)頁(yè)面設(shè)計(jì)可分為網(wǎng)站導(dǎo)航欄、顯示商品種類名稱、顯示商品區(qū)域、主要操作區(qū)、版權(quán)信息5個(gè)部分。其中，網(wǎng)站導(dǎo)航欄存在網(wǎng)站的一些前臺(tái)功能的鏈接，包括商品銷售排行、新品上架、特價(jià)商品等一些內(nèi)容。顯示商品種類名稱包括一些大類別名稱，當(dāng)用戶單擊任意一個(gè)類別的信息時(shí)會(huì)直接查詢這個(gè)類別下的商品的信息。顯示商品區(qū)域用來(lái)顯示用戶查詢的一些商品信息。主要操作區(qū)包括4方面內(nèi)容：1）用戶登錄信息，當(dāng)用戶第一次登錄網(wǎng)站時(shí)需要輸入用戶名和密碼，成為這個(gè)網(wǎng)站的會(huì)員的入口；2）商場(chǎng)公告，用來(lái)顯示商場(chǎng)的一些信息以供用戶了解本商場(chǎng)的情況；3）商品排行的一些信息，在這里用戶可以清楚的看到該商場(chǎng)的商品排行情況；4）網(wǎng)站的友情鏈接信息，用戶可以方便的從該網(wǎng)站進(jìn)入到其他網(wǎng)站而不必退出本系統(tǒng)再進(jìn)入到其他網(wǎng)站。版權(quán)信息顯示網(wǎng)站的一些版權(quán)信息。網(wǎng)站導(dǎo)航欄、顯示商品種類名稱、主要操作區(qū)、版權(quán)信息并不是存在于一個(gè)頁(yè)面當(dāng)中，其他功能模塊也需要包括這些部分。所以這幾個(gè)部分可單獨(dú)存放于一個(gè)文件夾。

2.1.1 管理員登錄后臺(tái)的超鏈接的樣式

作為該系統(tǒng)的管理員是要經(jīng)常進(jìn)入后臺(tái)對(duì)系統(tǒng)進(jìn)行更新與維護(hù)等問(wèn)題的處理，所以我們有必要也必須提供管理員進(jìn)入后臺(tái)的鏈接，這是一個(gè)良好的系統(tǒng)所必須擁有的設(shè)計(jì)。下面給出管理員登錄后臺(tái)的超鏈接代碼。

2.1.2 設(shè)置管理員登錄頁(yè)面的text樣式

管理員是可以方便的進(jìn)入系統(tǒng)的，他有區(qū)別于其他人的登錄方式。該方式的實(shí)現(xiàn)用到了CSS樣式技術(shù)，下面給出管理員登錄頁(yè)面的代碼：

2.1.3 全局的超鏈接

一個(gè)完整又良好的系統(tǒng)能夠使用戶方便的進(jìn)入該系統(tǒng)的任何一個(gè)頁(yè)面，所以就需要進(jìn)行頁(yè)面的超鏈接。有了超鏈接就可以快速的從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，該方法的實(shí)現(xiàn)用到了CSS樣式技術(shù)，實(shí)現(xiàn)該方法的代碼如下。

2.2 會(huì)員注冊(cè)和修改中的應(yīng)用

2.2.1 會(huì)員注冊(cè)

會(huì)員注冊(cè)頁(yè)面是一個(gè)最基本的頁(yè)面，它是用戶進(jìn)入該系統(tǒng)的前提條件，只有成為了該系統(tǒng)的用戶才可以進(jìn)入該系統(tǒng)。在誠(chéng)欣電子商城系統(tǒng)的注冊(cè)頁(yè)面中需要用戶填寫會(huì)員名稱、會(huì)員密碼、密碼確認(rèn)、真實(shí)姓名、年齡、職業(yè)、地址、找回密碼問(wèn)題和答案這些內(nèi)容，系統(tǒng)通過(guò)驗(yàn)證之后才可以成為該系統(tǒng)的會(huì)員。在這個(gè)頁(yè)面的設(shè)計(jì)中用到了DIV技術(shù)，該技術(shù)的應(yīng)用使得頁(yè)面的設(shè)計(jì)更加合理化、人性化。

2.2.2 會(huì)員修改

會(huì)員修改頁(yè)面是為了方便用戶對(duì)自己的會(huì)員信息進(jìn)行修改的一個(gè)頁(yè)面，該頁(yè)面的設(shè)計(jì)用到了DIV技術(shù)，這使得頁(yè)面的效果更佳。在用戶進(jìn)行會(huì)員修改時(shí)，需要填寫本頁(yè)面的所有問(wèn)題，只有這樣才能成功的修改會(huì)員信息。

2.3 CSS中的塊模型

在CSS的定義[7]中，有的html標(biāo)簽被瀏覽器當(dāng)成一個(gè)塊來(lái)顯示，比如 div、table、p、ul等等，我們稱之為塊元素；有的html標(biāo)簽被瀏覽器顯示在文本行之類，如a、span、font等等，我們稱之為行內(nèi)元素。

每 一 個(gè) 塊 元 素 都 可 以 分 為 context、padding、boder和margin幾個(gè)部分，我們常說(shuō)的寬和高，指的只是context的寬和高，padding代表內(nèi)容和邊框之間的填充，margin代表邊框之外的空白，如圖2所示。

圖2 CSS塊模型圖Fig.2 CSS block model diagram

這幾個(gè)部分都是可以通過(guò)CSS進(jìn)行指定的，當(dāng)然，CSS還可以控制背景，因此，我們可以通過(guò)CSS來(lái)靈活控制頁(yè)面的外觀，例如：

2.4 CSS中的文檔流模型

所有的塊元素在html文檔中是按照它們出現(xiàn)在文檔中的先后順序排列的（當(dāng)然，嵌套不在此列），每一個(gè)塊都會(huì)另起一行，如圖3所示。

圖3 CSS中的文檔流模型圖Fig.3 Document flow model diagram in CCS

它們對(duì)應(yīng)的html如下：

為了定義它們的寬度、高度還有邊框，定義如下的CSS：

3 使用DIV+CSS布局網(wǎng)站的優(yōu)點(diǎn)和缺陷

使用CSS布局可以從根本上解決表格布局帶來(lái)的問(wèn)題。CSS布局的重點(diǎn)不在表格元素的設(shè)計(jì)上，而是采用另外一種元素DIV。DIV可以理解為層或者塊。DIV是一種比表格簡(jiǎn)單的元素，從語(yǔ)法上只有這樣簡(jiǎn)單的定義。DIV的功能僅僅是將一段信息標(biāo)記出來(lái)用于后期樣式的定義。通過(guò)使用DIV，可以將網(wǎng)頁(yè)中的各個(gè)元素劃分到各個(gè)DIV中，成為網(wǎng)頁(yè)中的結(jié)構(gòu)主體，而樣式表現(xiàn)由CSS完成。DIV在使用時(shí)不再需要像表格一樣通過(guò)單元格來(lái)組織板式，通過(guò)CSS強(qiáng)大的樣式定義功能可以比表格更簡(jiǎn)單更自由地來(lái)控制頁(yè)面版式和樣式。DIV+CSS[8]的優(yōu)勢(shì)主要體現(xiàn)在以下方面。

1）符合W3C標(biāo)準(zhǔn) 微軟等公司均為W3C支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷?lái)網(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。

2）支持瀏覽器的向后兼容 也就是無(wú)論未來(lái)的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容。

3）搜索引擎更加友好 相對(duì)與傳統(tǒng)的table，采用DIV+CSS技術(shù)的網(wǎng)頁(yè)，對(duì)于搜索引擎的收錄更加友好。

4）樣式的調(diào)整更加方便 內(nèi)容和樣式的分離，使頁(yè)面和樣式的調(diào)整變得更加方便。 現(xiàn)在YAHOO、MSN等國(guó)際門戶網(wǎng)站，網(wǎng)易、新浪等國(guó)內(nèi)門戶網(wǎng)站，以及主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢(shì)所趨。

5）CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼 對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。

6）表現(xiàn)和結(jié)構(gòu)分離 在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

7）降低流量費(fèi)用 頁(yè)面體積變小，瀏覽速度變快，這就使得對(duì)于某些控制主機(jī)流量的網(wǎng)站來(lái)說(shuō)是最大的優(yōu)勢(shì)了。

8）保持視覺(jué)的一致性 DIV+CSS最重要的優(yōu)勢(shì)之一：保持視覺(jué)的一致性；以往表格嵌套的制作方法，會(huì)使得頁(yè)面與頁(yè)面或者區(qū)域與區(qū)域之間的顯示效果會(huì)有偏差。而使用DIV+CSS的制作方法，將所有頁(yè)面或所有區(qū)域統(tǒng)一用CSS文件控制，就避免了不同頁(yè)面或不同區(qū)域體現(xiàn)出的效果偏差。

9）對(duì)瀏覽者和瀏覽器更具親和力 眾所周知網(wǎng)站做出來(lái)是給瀏覽者使用的，對(duì)瀏覽者和瀏覽器更具親和力，DIV+CSS在這方面更具優(yōu)勢(shì)。由于CSS富含豐富的樣式，使頁(yè)面更加靈活性，它可以根據(jù)不同的瀏覽器，而達(dá)到顯示效果的統(tǒng)一和不變形。

在看重CSS網(wǎng)頁(yè)布局的意義與優(yōu)點(diǎn)時(shí)，也不能輕視CSS網(wǎng)頁(yè)布局的副作用。

1）DIV+CSS盡管不是高不可及，但至少要比表格定位復(fù)雜的多，即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問(wèn)題，更不要說(shuō)初學(xué)者了。

2）CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在1個(gè)外部文件中或幾個(gè)文件，有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將變得慘不忍睹。

3）雖然說(shuō)DIV+CSS解決了大部分瀏覽器兼容問(wèn)題，但是也有在部分瀏覽器中使用出現(xiàn)異常，比如火狐瀏覽器，在IE中顯示正常的頁(yè)面，到了火狐瀏覽器中可能會(huì)面目全非。當(dāng)然這應(yīng)該是瀏覽器的問(wèn)題，但是可以說(shuō)在目前來(lái)看，DIV+CSS還沒(méi)有實(shí)現(xiàn)所有瀏覽器的統(tǒng)一兼容。

4）DIV+CSS對(duì)搜索引擎優(yōu)化與否，取決于網(wǎng)頁(yè)設(shè)計(jì)的專業(yè)水平，而不是DIV+CSS本身。DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)并不能保證網(wǎng)頁(yè)對(duì)搜索引擎的優(yōu)化，甚至不能保證一定比HTML網(wǎng)站有更簡(jiǎn)潔的代碼設(shè)計(jì)，何況搜索引擎對(duì)于網(wǎng)頁(yè)的收錄和排序顯然不是以是否采用表格和CSS定位來(lái)衡量，這就是為什么很多傳統(tǒng)表格布局制作的網(wǎng)站在搜索結(jié)果中的排序靠前，而很多使用CSS及web標(biāo)準(zhǔn)制作的網(wǎng)頁(yè)排名依然靠后的原因。因?yàn)閷?duì)于搜索引擎而言，網(wǎng)站結(jié)構(gòu)、內(nèi)容、相關(guān)網(wǎng)站鏈接等因素始終是網(wǎng)站優(yōu)化最重要的指標(biāo)。

綜合以上討論的DIV+CSS優(yōu)勢(shì)和略勢(shì)，我們認(rèn)為不可盲目跟風(fēng)，如何更有效、更合理的運(yùn)用WEB2.0設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長(zhǎng)時(shí)間的學(xué)習(xí)和鍛煉。而如何將DIV+CSS運(yùn)用的更好，這需要通過(guò)不斷的實(shí)踐和體檢，積累豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能很好的掌握這門技術(shù)。

4 結(jié)束語(yǔ)

隨著各大主流瀏覽器對(duì)CSS2.0的功能的支持不斷完善，DIV+CSS布局最終會(huì)取代傳統(tǒng)TABLE布局。各種企事業(yè)單位或者個(gè)人對(duì)其所有網(wǎng)站進(jìn)行改版成了趨勢(shì)，制作符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)成了重中之重。使用DIV+CSS布局，真正實(shí)現(xiàn)了結(jié)構(gòu)、表現(xiàn)和行為的分離。提高了網(wǎng)頁(yè)開發(fā)的效率和頁(yè)面下載的速度，提高了網(wǎng)站維護(hù)和修改的效率。以上對(duì)DIV+CSS技術(shù)的論述與探討，是我們應(yīng)用DIV+CSS技術(shù)的體會(huì)與初探，對(duì)DIV+CSS技術(shù)應(yīng)用研究?jī)?yōu)待于進(jìn)一步探討。

[1]孫鑫.JAVA WEB開發(fā)詳解[M].西安:西安電子科技大學(xué)出版社，2008.

[2]楊陽(yáng).DIV+CSS網(wǎng)站布局實(shí)錄[M].北京:科學(xué)出版社，2009.

[3]王海濤.CSS權(quán)威教程[M].北京:清華大學(xué)出版社，2008.

[4]王國(guó)輝，王毅，李鐘蔚.JSP程序開發(fā)范例寶典[M].北京:人民郵電出版社，2007.

[5]張俊蘭，王文發(fā)，馬樂(lè)榮.軟件工程[M].西安:西安交通大學(xué)出版社，2009.

[6]劉曉華，張健，周慧貞.jsp應(yīng)用開發(fā)詳解[M].3版.北京:電子工業(yè)出版社，2008.

[7]謝君英.CSS與Dreamweaver CS3完美網(wǎng)頁(yè)設(shè)計(jì)[M].北京:人民郵電出版社，2009.

[8]李孟晃，陳思妤.PC與IPTV影音服務(wù)選單——數(shù)位匯流技術(shù)開發(fā)[J].現(xiàn)代電子技術(shù)，2010（6）：94-98.

LI Meng-huang，CHEN Si-yu.Menu system convergence of video service for PC and IPTV platforms[J].Modern Electronic Technique,2010（6）：94-98.

Application of DIV+CSS technology in Chengxin electronic mall system

ZHANG Jun-lan，HE Jing-yuan，YE Qian
（Department of Computer Science，Yan’an University，Yan’an716000，China）

DIV+CSS technology as the starting point to application of DIV+CSS technology in Chengxin electronic mall system is discussed.first reconstruction of DIV+CSS web technology is discussed，then application of Page design in Chengxin electronic mall system is analyzed.to DIV and CSS technology and gave a specific code.Finally it resolved to DIV+CSS technology on the based of application of DIV+CSS technology in Chengxin electronic mall system and summarized the advantages and shortcomings of DIV+CSS layout site.

DIV+CSS web reconstruction； WEB standards； DIV+CSS layout； performance and behavior

TP391

A

1674－6236（2012）05-0039-04

2011-12-08稿件編號(hào)：201112043

張俊蘭（1953—），女，陜西綏德人，教授。研究方向：圖形圖像處理、軟件工程、計(jì)算機(jī)應(yīng)用等。