當今時代的網(wǎng)頁設(shè)計主流方向大致趨向于“內(nèi)容”與“形式”分離的靜態(tài)設(shè)計，在網(wǎng)站重構(gòu)的熱潮中前進的DIV+CSS技術(shù)的網(wǎng)頁設(shè)計優(yōu)化為許多的網(wǎng)頁設(shè)計者帶來了更為方便的享受，DIV+CSS是以DIV來控制網(wǎng)站模塊布局、CSS控制頁面內(nèi)容表現(xiàn)形式的的新型網(wǎng)頁設(shè)計技術(shù)。但在實際操作中，DIV+CSS技術(shù)還存在著一些較為棘手的問題。因此，設(shè)計者在運用DIV+CSS技術(shù)進行網(wǎng)頁設(shè)計時，要充分考慮到其可行性，對其進行最大程度的優(yōu)化，使其在網(wǎng)頁設(shè)計中能夠發(fā)揮最大化功效。

1 DIV+CSS的不足

1.1 瀏覽器兼容問題

DIV+CSS技術(shù)的不成熟，導致設(shè)計者在網(wǎng)頁設(shè)計中常常出現(xiàn)自己電腦顯示的網(wǎng)頁效果與其他機器上的網(wǎng)頁效果有差異的情況，造成這種差異的原因往往是由于不同的電腦瀏覽器的兼容效果不一樣，如IE6、Firefox、Mozilla等瀏覽器對、CSS（級聯(lián)樣式表）的解析程度不一致，很容易造成網(wǎng)頁頁面效果的差異。

1.2 操作難度大

DIV+CSS的技術(shù)復雜度相比table而言要更難操作，特別是對于網(wǎng)頁設(shè)計代碼的初學者來說，設(shè)計思維已經(jīng)固定后很難接受CSS先定義后使用的操作樣式，在這種情況下如果讓其使用DIV+CSS操作技術(shù)反而只能取得相反效果。

2 基于DIV+CSS技術(shù)的網(wǎng)頁設(shè)計優(yōu)化方法

2.1 慎用DIV塊

在進行布局時，無需在對象中重復使用同一個DIV模塊。列表本身為完整對象的話就可以直接使用樣式，如圖1中的兩段代碼。顯然其最終顯示效果是完全一致的，但右邊代碼看起來要比左邊更為簡潔明了。

除了直接使用樣式之外，還要盡可能減少DIV的嵌入與套用，多層嵌套的DIV布局會破壞DIV+CSS優(yōu)越性，還容易造成瀏覽器不兼容問題。因此，設(shè)計者在進行DIV+CSS技術(shù)的網(wǎng)頁設(shè)計時，要充分使用簡單TABLE設(shè)計來讓網(wǎng)頁代碼變得更為整潔。

2.2 盡量使用外部CSS樣式

CSS樣式表主要特點體現(xiàn)在頁面的美化與風格的統(tǒng)一上，但設(shè)計者在對網(wǎng)頁代碼進行美化時要注意代碼的結(jié)構(gòu)性，不能采用一個DIV用一個樣式或者采用獨立的樣式表來增加代碼復雜度，應盡量使用外部CSS樣式，將效果一樣的樣式定義為多次使用，并且在頁面存在差異的地方進行適當?shù)莫毩邮酱a編寫。

2.3 使用子選擇器

在簡化CSS選擇器時，利用子選擇器的樣式定義能夠有效簡化代碼，如：

以上這段代碼的CSS定義為：

利用子選擇器來設(shè)計和簡化代碼，則可以用下面的代碼替代：

CSS樣式定義為：

將“#nav{}”設(shè)為主選擇器使用，后面的子選擇器則會自動尋找相對應的樣式，無需重復定義新樣式。

2.4 id與class靈活搭配

很多設(shè)計者在提高CSS選擇器的利用率通常會采用class來取代id。盡管class用途要比id靈活和廣泛，但id由于具備強制唯一性特征，更能夠讓使用者快速簡便的通過id檢索到所需模塊，其網(wǎng)頁結(jié)構(gòu)構(gòu)建顯然要高于class。因此在進行CSS選擇器使用時，要做到id與class靈活搭配，將id運用在網(wǎng)頁的布局和設(shè)計元素中方便使用者檢索和翻閱，同時將class運用在文字排版中降低樣式復雜度。

3 結(jié)語

隨著網(wǎng)絡(luò)信息技術(shù)的發(fā)展，現(xiàn)如今的網(wǎng)頁設(shè)計所采用的“內(nèi)容”與“樣式”分離設(shè)計方法式網(wǎng)頁代碼的設(shè)計變得更為簡潔，使用DIV在HTML中編寫內(nèi)容和結(jié)構(gòu)，再采用CSS建立代碼樣式的設(shè)計方法既能夠有效節(jié)省網(wǎng)頁空間，對其進行重復利用，還能夠減少代碼的設(shè)計難度，給設(shè)計者帶來更為便捷的操作體驗。在技術(shù)的不斷優(yōu)化下，基于DIV+CSS技術(shù)之下的網(wǎng)頁設(shè)計一定能夠?qū)崿F(xiàn)更好的發(fā)展。

[參考文獻]

[1]吳建華.淺談DIV+CSS技術(shù)[J].福建電腦，2011，27（11）：74-75.

[2]楊米娜.DIV+CSS技術(shù)在網(wǎng)頁布局中的應用研究[J].電腦開發(fā)與應用，2012，25（4）：64-66，69.