幾年前DIV+CSS開始逐漸成為網頁設計的優選方式,目前來看,DIV+CSS已成為網頁設計的標準,國內非常多的網站在這幾年已完成了從TABLE到DIV+CSS的重構。筆者也是一名偏愛這種方式的網頁設計師,工作3年來一直采用div+css方式為客戶提供設計。那么相比TABLE,它具有哪些優勢呢?下面談談個人幾點體會和認識,希望對同行和有關人員有所幫助。
網頁設計采用DIV+CSS,更大的優勢是實現網頁代碼的標準化,摒棄過時的表格布局方式,實現了內容、表現和行為這3者間的分離,html代碼結構性更好,閱讀和維護更容易,同時網頁文件大小也更小。比如更近給一個客戶的網站重構后,網頁文件大小不到原來的一半,因此占用更少的網站空間,網站打開速度也更快。
DIV+CSS與TABLE方式在設計時差別很大,網頁開始設計前需要仔細規劃,比如對組成網頁的各部分元素命名,方便在css中進行樣式定義,公共屬性部分更好用類名定義。整個網站通用的樣式可以放到單獨的一個css文件中,常有的公共屬性有:網頁寬度、背景顏色、背景圖片、字體默認大小、顏色、鏈接樣式等,每個網頁不同的樣式在css文件中更好集中一塊,并在塊前說明是哪個網頁或哪個網頁部分,這樣既精簡css文件大小,又避免出現混亂,對維護也更方便。值得一提的是,網頁代碼中不要嵌入樣式,徹底實現內容和樣式的分離。
做好DIV+CSS的網頁設計,有三點需要重點理解。
1、float屬性:DIV(層)默認是占據一整行,對于常見的兩列或多列布局的設計,需要能夠正確設置float及width屬性實現效果。多列布局結束后如果跟了一個占據通欄的層,此時需要設置clear屬性清除層浮動。
2、盒模式:層具有寬度width、高度height、邊框border、內間距padding和外間距margin等屬性,而層實際占據的空間是上述屬性值相加的大小,合理運用這些屬性能實現緊湊而又美觀的網頁布局。
3、層嵌套:有經驗的網頁設計師都知道層不宜嵌套過多,一般不超過3層,嵌套過多的會導致代碼復雜冗余、維護困難及運行慢的問題。另外,在多列布局時完全可以用層浮動實現,不需要整體設置一個層來嵌入。
單獨提下瀏覽器兼容的話題。DIV+CSS相比TABLE布局,更容易出現多種瀏覽器不兼容的問題,主要原因是不同的瀏覽器對web標準默認值不同。國內主流是ie、firefox、chrome,在兼容性測試方面,首先需要保證在ie多版本不出現問題,這里設計到一些方法和技巧,可以針對具體問題在網站查找解決辦法。
總結:DIV+CSS相比TABLE有根多的優勢,網頁設計師應該及早摒棄TABLE方式,督促深入學習DIV+CSS知識。
上海網頁設計公司采用DIV+CSS相比TABLE的優勢有哪些
發布時間:2015-10-13
標簽: 上海網頁設計 ,
相關文章
- 微信訂閱號和服務號在功能上有哪些區別
- 你的網站是怎樣設計制作增加用戶體驗的
- 上海網頁制作公司做網站公司網站制作流程
- 網站建設中影響用戶體驗的網站設計操作
- 上海網頁制作公司設計的網頁簡潔不等于簡陋
- 上海網頁設計公司精美設計 流量保障其經營效益
- 怎樣的上海網頁制作有利于谷歌優化?
- 網站設計如何做到用戶參與?
- 上海網站設計要這樣搭配?
- 上海網頁設計公司在制作網頁過程中應該注意的事項
- 上海網頁設計公司如何生存發展
- 上海網頁制作公司圖片居中問題
- 上海網頁設計:對搜索引擎來說,什么重要?什么不重要?
- 上海網頁設計公司應該達成的幾個功效
- 毀掉上海網站設計的7個可能因素
- 上海網頁設計公司應該如何更好的留住用戶
- 淺談上海網站設計中的簡約之美
- 上海網頁制作網站文件權限設置,別告訴我你認識它!
- 如何提高網站服務器的安全性?
- 客戶眼里的酷炫網站制作,原來是交互設計的魔法