SEO

網站導覽 / RSS / 加入最愛 /




網頁設計之CSS佈局10個注意要項

Share |

網站在建設中網頁設計是很重要的一部分,其中CSS佈局是影響網頁設計好的壞的主要原因,由於我們眾多人對於CSS的佈局並不是非常的瞭解,很多時候都套用現成的CSS佈局,今天我們來簡單下面介紹幾種檢查調試CSS佈局的有效方法。

1. 檢查CSS是否書寫正確:檢查一下有無拼寫錯誤、是否忘記結尾的}等。可以利用CleanCSS來檢查CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具,同時也能檢查出拼寫錯誤。

2. 檢查HTML元素是否有錯誤與結束標記:即使是老手也經常會弄錯div的嵌套關係,可以用dreamweaver的驗證功能檢查一下有無錯誤。

3. 利用border屬性確定出錯元素的佈局特性:使用float屬性佈局一不小心就會出錯。這時為元素添加border屬性確定元素邊界,錯誤原因即水落石出。

4. 用刪除法確定錯誤發生的位置:如果錯誤影響了整體佈局,則可以逐個刪除div塊,直到刪除某個div塊後顯示恢復正常,即可確定錯誤發生的位置。

5. float元素的父元素不能指定clear屬性MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素佈局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。

6. float元素務必指定width屬性:很多瀏覽器在顯示未指定widthfloat元素時會有bug所以不管float元素的內容如何,一定要為其指定width屬性。另外指定元素時盡量使用em而不是px做單位。

7. float 元素不能指定 margin padding 等屬性 IE 在顯示指定了 margin padding float 元素時有 bug 因此不要對 float 元素指定 margin padding 屬性(可以在 float 元素內部嵌套一個 div 來設置 margin padding )。也可以使用 hack 方法為 IE 指定特別的值。

8. float元素的寬度之和要小於100%:如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%

9. 是否忘記了寫DTD:如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那麼可以檢查一下頁面開頭是不是忘了寫DTD

10. 是否重設了默認的樣式:某些屬性如marginpadding等,不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的marginpadding設置為0、列表樣式設置為none等。