div+css作為目前網頁設計的標準，得到了廣泛的應用，國內非常多的**早在幾年前就已經實現了重構。本文結合作者近期改版**過程中遇到的一些問題，**自己的幾點體會，希望能對剛剛從事網頁設計的朋友有所幫助，當然也歡迎大家能批評指正。
網頁重構，最主要的好處在於實現了網頁設計的標準化，摒棄傳統的**布局方式，充分達到內容、表現和行為三者的分離，使得html**更加容易閱讀和維護，同時檔案也變得更小。例如，**改版後，所有的網頁檔案大小都不到原來的一半，因此占用的伺服器空間更小，執行效率也得到很大的提公升，主頁開啟速度明顯比以前更快。
div+css的網頁布局方式，與傳統的table布局有很大差異，因此在網頁設計之前就要有乙個詳細的規劃，對組成網頁的各部分元素都進行命名，方便在css檔案中進行樣式定義，公共屬性部程式設計客棧分可以採用類名的方式來定義。在整個站點中，對於**通用的樣式可以定義乙個公共的css檔案，例如包括網頁寬度、背景顏色、背景、文字預設大小、顏色、鏈結樣式等，然後可以為每個網頁定義乙個單獨的css檔案，這樣做非常有利於精簡css檔案的大小，避免出現引用混亂和難以維護的問題。同時，也要絕對避免使用行內css的方式，徹底實現內容和樣式的分離。
個人認為，做好div+css的網頁重構，有兩個關鍵的概念必須要精通。
第一是float屬性，因為在預設情況下，所有的d程式設計客棧iv都是佔據一整行的，因www.cppcns.com此對於常見的兩列、三列等多列布局的設計，要正確設定float以及width屬性來實現層浮動，達到我們所需要的布局效果，多列布局結束之後單獨佔據一行的其他層（比如通欄banner等），也要設定clear屬性來清除層浮動。
第二是盒模式，對於任何乙個div層，可以定義其寬度width、高度height、四周邊框border粗細和樣式，以及內容到邊框的邊界padding和邊框到周圍層的空白margin等屬性，而層實際佔據的空間則是上述屬性相疊加的結果，正確設定這些屬效能幫助我們實現緊湊而又美觀的網頁布局。盒模式的理解對於網頁布局的設計至關重要，特別是不同瀏覽器中可能會有不一樣的解釋方式，甚至會由於1個畫素的差異導致布局混亂，這個時候可以適當減小層的width或者height屬性來進行微調。
d程式設計客棧iv的巢狀也是乙個需要重點說明的問題，我們都知道在table布局時要儘量減少巢狀，對於div也是一樣，巢狀的弊端在於**複雜、維護困難以及執行效率低，因此也要盡量將巢狀控制在3層之內。另一方面，對於多列布局的情況下，完全可以採用層浮動的方式實現，沒有必要整體設定乙個div來嵌入。
當然，層布局方式還面臨乙個重要的挑戰就是瀏覽器相容性，造成這個問題最主要的原因是不同瀏覽器對web標準的預設值不同。從國內來看，大部分使用者使用ie瀏覽器，如我的**近幾個月的統計來看超過45%的訪問者使用ie 6.0，其餘使用較多的包括ie 8.0、ie 7.0以及國產的以ie為核心的瀏覽器，firefox和chrome等非ie核心的瀏覽器占得比例很少。因此，在瀏覽器相容性測試方面，要首先保證在ie瀏覽器下執行不出現錯誤，這方面有很多的技巧大家可以從網上查到，對於一些細小的差異可以逐步進行改進和除錯。
總之，div+css的網頁布局方式有非常多的優點，建議網頁設計者從最初開始就放棄table布局方式，這樣非常有利於對css樣式表的深入學習和應用。其實，di程式設計客棧v+css的網頁布局方式並不複雜，只要了解一些基礎知識，通過乙個案例的實踐過程就可以掌握，並且得到不斷的提高。本人在這方面也是新手，歡迎能和廣大從事網頁設計的朋友們相互交流、共同進步。
作者**：蘭州開心網
本文標題: 關於採用div+css重構網頁設計的幾點體會
本文位址:
網頁設計採用div css的優點和缺點
優點 1.一般div css頁面都是將html和css檔案分開，也就是說乙個網頁的內容和表現形式的分離，這樣更利於後期整個 的維護，一般只要修改css檔案中的乙個css屬性就可以修改頁面的樣式，例如背景顏色，字型等，這是table布局不具有的 4.有利於搜尋引擎的搜尋，用只包含結構化內容的html代...
關於重構的幾點感悟
如果問乙個程式設計師 為什麼會變爛？他可能會找出無數種理由 1 本來就爛，我只是加了一點東西 2 時間壓得太緊，根本沒有時間把 優化，功能實現出來就不錯了 3 系統已經上線了，不敢隨便去改以前的 不出問題還好，改出問題了誰負責 但是，這都是從外部找原因推卸責任，程式設計師應該從自身尋找原因。其實，變...
DIV CSS網頁設計 有用的3個CSS技巧
一 在一行內宣告css 複製 如下 h2 h2 第二種看起 來的確格式化，但是不會在閱讀上有任何幫助。寫在一行內可以讓你更快的找到需要的部分。以前我也是寫成類似第二種方式，但是逐漸發現就像文章 說的一樣，沒多大用。一行看起來又爽快又省地方還能讓檔案更小。二 分塊書寫 這樣書寫 可以讓css更頁面化，...