CSS+DIV布局之道

以前用CSS+DIV做過兩個小項目，感覺并不是很通暢，覺得有必要在這方面補補課，最近又用CSS+DIV山寨了幾個界面，算是練手吧，現在思路清晰多了，和大家分享。

一、為什么采用CSS+DIV布局？簡單談幾點？

首先，CSS+DIV布局對搜索引擎友好，為什么友好？是因為CSS+Div布局的代碼簡單，提高spider爬行效率，能在較短的時間內爬完整個頁面，這樣對收錄質量有好處。真正的網站優化不只是為了追求收錄，還需要良好的用戶體驗，代碼簡單自然會有良好的響應速度，對提高用戶體驗很有幫助。

例如：結合CSS和XHTML來制作導航菜單會比使用Javascript或圖片來實現同樣效果更加節省代碼(CSS可以結合一些圖片來制作導航而且代碼量很小，而完全使用圖片的導航代碼量也要多很多)，

另外如果盡可能完善到能通過W3C驗證，與普通表格組成頁面的網站相比，使用XTML架構的網站排名狀況要好。

其次，內容與樣式分離，修改設計效率高。到CSS里找到相應的ID或class或標記修改屬性值即可，使得修改頁面的時候更加方便，也不會破壞頁面其他部分的布局樣式。而且可以實現一鍵切換整個頁面風格。

還有視覺方面，以往表格嵌套的制作方法，使得頁面與頁面或者區域與區域之間的顯示效果會有所偏差；而使用DIV+CSS的制件方法，將所有的頁面或所有區域統一用CSS文件控制，就避免了不同區域或不同頁面體現出的效果偏差。使用CSS來設計導航菜單并不會限制你的設計。事實上，CSS會提供更加靈活的導航設計方案，當用CSS來設置背景圖時也能實現各種視覺效果。

二、采用CSS+DIV布局，從何做起。

當你從美工那里（如果沒有美工，我們后面談）拿到一個頁面的草圖，準備用CSS+DIV實現這個頁面，那么一般要經過這么三個步驟：

分析構架，模塊拆分，整體調整。

第一步、分析構架

例如，分析下面這個頁面

我們應該把他的內容忽略掉，直接提取出這個頁面的骨架，也就是這個頁面的排版構架。見下圖。

其他常用的布局，大概也就是下面這幾個，你就從網上看吧，大概都差不多，無非就這么幾塊倒來倒去。

第二步，模塊拆分

這里主要是分析框架中都有哪幾部分，也就是考慮這個頁面由哪些元素構成。方便我們實施DIV分塊。

從上圖，我們也很容易看出，這個頁面主要有四個部分：導航和頂端banner，左側列表，內容區，腳注（草圖中省去了，太長了）

Div分塊結束后，然后再針對內容加入CSS樣式。

第三步，整體調整

這里無非就是對于整個頁面邊邊角角的把握。一些收尾工作吧。

三、一些小建議，也是用CSS+DIV做頁面的一點心得。

1、 如果沒有美工給你提供界面的草圖。個人又沒有沒學基礎，或者缺少靈感，建議，從網上找一個差不多的界面，實行高仿（或者找一個免費的模板），當然不要總是 對一個界面下手（小心侵權）。這樣效率高，頁面效果也不會太差，太差得你也看不上是吧。或者，你不想從頭設計頁面的某個部分，例如導航菜單，那么有大量的 免費資源可以拿來使用。

拿來主義雖好，但我可不提倡，因為這樣會和其它網站使用同樣的風格。不過有一些菜單可以自定義樣式來符合你自己的網站風格。

2、 如果要做全瀏覽器兼容網站，那么一定要邊開發，邊檢查瀏覽器兼容，為什么？如果你在一個瀏覽器上開發完一個界面，甚至所有界面，那么忽然換一個瀏覽器測 試，出了問題，如果小問題還好，如果是位置等一些問題，你會發現，它會打亂你整個頁面的布局，等于你又要從頭開始檢查，一點點改過來，我試過，麻煩得要 死。

沒辦法，這是CSS現在最主要的缺點：并非所有的CSS元素與所有的瀏覽器兼容。正因為如此，我們必須寫一些自定義CSS來解決問題。這也是它與table布局的主要區別之一。

3、火狐和谷歌提供的開發人員工具，例如firebug等，一定要會使，無論是研究別人的頁面，還是維護自己的頁面，都會為你的開發帶來事半功倍的效果。

4、做好積累工作，在開發過程中用到的小技巧，特效或者處理一些瀏覽器兼容的方法，一定要記錄下來，積極分享，于人于己都有好處。

5、要使你的頁面盡可能的輕，能用小圖，不用大圖，能用小圖repeat-x，絕對不要用一整張大圖。至于精簡代碼的好處，前面已經提到。

轉自：http://blog.csdn.net/shan9liang/article/details/7736759