CSS網頁布局的幾個建議

CSS網頁布局的幾個建議

1、如果一組要嵌套的標簽之間需要些間距的話，那就留給位于里面的標簽的margin屬性吧，而不要去定義位于外面的標簽的padding

2、li標簽前面的圖標推薦使用background-image，而不是list-style-image。

3、在給你的標簽瘋狂加選擇符的時候，別忘了在CSS里給選擇符加上注釋。 等你以后修改你的CSS的時候就知道為什么要這么做了。

4、如果你給一個標簽設置了一個深色調的背景圖片和亮色調的文字效果。建議這個時候給你的標簽再設置一個深色調的背景顏色。

5、定義鏈接的四種狀態要注意先后順序: Link Visited Hover Active

6、與內容無關的圖片請使用background

7、定義顏色可以縮寫#8899FF=#89F
 

8、table在某些方面比其它標簽表現的要好的多。請在需要列對齊的地方用它。

9、margin取負值可以在標簽使用絕對定位的時候起到相對定位的作用，在頁面居中顯示時，使用絕對定位的層不適合使用left:XXpx這個屬性。把這個層放到一個要相對定位的標簽旁，然后使用margin的負值是個好方法。

10、絕對定位時使用margin值定位可以達到相對于本身所在位置的定，這與top，left等屬性相對與窗口邊緣的定位不同。絕對定位的優勢在于可以讓其它元素忽略它的存在。

11、在IE中可能由于注釋帶來的文字重復問題時可以把注釋改為：

<!–[if !IE]>Put your commentary in here…<![endif]–> 

12、如何讓一個表單中的文本框中的文字垂直居中？

讓行高與高度相等，如果在FF中沒有效果，可以定義上下補白就可以實現。
 

13、定義A標簽要注意的小問題：

當我們定義a{color:red;}時，它代表了A的四種狀態的樣式，如果此時要定義一個鼠標放上的狀態只要定義a:hover就可以了，其它三種狀態就是A中所定義的樣式。

只定義了一個a:link時，一定要記得把其它三種狀態定義出來！

15、并不是所有樣式都要簡寫：

當樣式表前定義了如 p{padding:1px 2px 3px 4px} 時，在后續工程中又增加了一個樣式上補白5px，下補白6px。

我們并不一定要寫成 p.style1{padding:5px 6px 3px 4px} 。可以寫成 p.style1{padding-top:5px;padding-right:6px;},
你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重復定義了樣式，另外你可以不必去找原來的下補白與左補白的值是多少！如果以后前一個樣式P變了話，你定義的p.style1的樣式也要變。 

16. 背景尺寸

背景尺寸（Background size）是CSS3中最實用的效果之一，目前很多瀏覽器都已經支持。Background size屬性可以讓你隨心所欲的控制背景圖的尺寸大小。

從前用于背景的圖像大小在樣式中是不可調整的，如果你無法想象那樣有多么糟糕，可以試著回憶一下，在自己的電腦桌面上做壁紙的時候遇到一張合乎心意卻偏偏與桌面尺寸不合的圖片，只能通過平鋪來填充。

那樣的桌面丑的讓一個審美觀及格的人都會有砸屏幕的沖動。而現在我們可以通過改變一行代碼讓背景圖片適應自己的頁面。

li
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

17. Margin: 0 auto

Margin: 0 auto實現的是CSS中最基礎的功能，我們常常也會用它來實現最簡單也最常用的功能—居中。雖然CSS本身沒有一個指定居中的功能，但是通過auto margin指定一個邊距仍然能非常簡單的就實現居中這個功能。

通過這個屬性，用一段簡單的代碼就能實現元素的居中。但需要注意的是，就像以下代碼中那樣，必須給li設定一個寬度。

.myli {
margin: 0 auto;
width:600px;

}

18、網站越大，CSS樣式越多，開始做前，請做好充分的準備和策劃，包括命名規則。頁面區塊劃分，內部樣式分類等。