wap.scbotoho.cn 昆山網(wǎng)站建設 昆山網(wǎng)絡公司
網(wǎng)頁設計采用DIV+CSS，最大的優(yōu)勢是實現(xiàn)網(wǎng)頁代碼的標準化，摒棄過時的表格布局方式，實現(xiàn)了內(nèi)容、表現(xiàn)和行為這3者間的分離，html代碼結構性更好，閱讀和維護更容易，同時網(wǎng)頁文件大小也更小。比如最近給一個客戶的網(wǎng)站重構后，網(wǎng)頁文件大小不到原來的一半，因此占用更少的網(wǎng)站空間，網(wǎng)站打開速度也更快。
DIV+CSS與TABLE方式在設計時差別很大，網(wǎng)頁開始設計前需要仔細規(guī)劃，比如對組成網(wǎng)頁的各部分元素命名，方便在css中進行樣式定義，公共屬性部分最好用類名定義。整個網(wǎng)站通用的樣式可以放到單獨的一個css文件中，常有的公共屬性有：網(wǎng)頁寬度、背景顏色、背景圖片、字體默認大小、顏色、鏈接樣式等，每個網(wǎng)頁不同的樣式在css文件中最好集中一塊，并在塊前說明是哪個網(wǎng)頁或哪個網(wǎng)頁部分，這樣既精簡css文件大小，又避免出現(xiàn)混亂，對維護也更方便。值得一提的是，網(wǎng)頁代碼中不要嵌入樣式，徹底實現(xiàn)內(nèi)容和樣式的分離。
做好DIV+CSS的網(wǎng)頁設計，個人決得有三點需要重點理解。
1、float屬性：DIV(層)默認是占據(jù)一整行，對于常見的兩列或多列布局的設計，需要能夠正確設置float及width屬性實現(xiàn)效果。多列布局結束后如果跟了一個占據(jù)通欄的層，此時需要設置clear屬性清除層浮動。
2、盒模式：層具有寬度width、高度height、邊框border、內(nèi)間距padding和外間距margin等屬性，而層實際占據(jù)的空間是上述屬性值相加的大小，合理運用這些屬性能實現(xiàn)緊湊而又美觀的網(wǎng)頁布局。
3、層嵌套：有經(jīng)驗的網(wǎng)頁設計師都知道層不宜嵌套過多，一般不超過3層，嵌套過多的會導致代碼復雜冗余、維護困難及運行慢的問題。另外，在多列布局時完全可以用層浮動實現(xiàn)，不需要整體設置一個ie層來嵌入。
單獨提下瀏覽器兼容的話題。DIV+CSS相比TABLE布局，更容易出現(xiàn)多種瀏覽器不兼容的問題，主要原因是不同的瀏覽器對web標準默認值不同。國內(nèi)主流是ie,firefox及chrome用的較少，在兼容性測試方面，首先需要保證在ie多版本不出現(xiàn)問題，這里設計到一些方法和技巧，可以針對具體問題在網(wǎng)站查找解決辦法。
