Web頁面切圖和CSS注意事項

1、Web頁面切圖

1) Web頁面的切圖類型能夠概括爲背景（bg）、列表項目的符號（li）、內容中插入的圖片（pic）、按鈕（btn）、圖標等幾種形式（ico）。

2) 建議把用CSS背景加載的圖片拼合成一張圖片。這樣可減小對服務器的請求。從而提高頁面加載速度。

3) 除頁面頭部大圖保存格式爲JPG外，其餘圖片一概採用gif格式

2、CSS相關事項：

1) 全部的xhtml代碼小寫。

2) 每一個標籤都要有開始和結束，且要有正確的層次,沒有結束標籤的，標籤後加上"/"。 如：<img />、<br />

3) 全部的屬性必須用引號""括起來。

4) 文檔類型必須聲明，禁止文檔類型亂用。

5) 全部<和&特殊符號用編碼表示。

6) 必須正確使用代碼縮進，縮進時使用tab(鍵盤中的TAB鍵)，禁止無縮進、亂縮進，禁止使用空格縮進。

7) CSS加載的背景圖片要預約義寬度和高度，路徑採用絕對路徑能夠直接從訪問者計算機緩存中加載，提升頁面加載速度。

8) 要儘量作到表現與結構徹底分離，代碼中不涉及到表現元素，如style、font、bgColor、border、b。

9) <h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢。採用繼承方式，不然個性定義就會失效。

10) Font的縮寫爲：樣式 粗細 大小 行高 字體 （font:italic bold 12px/30px 「simsun」）。

11) class和id選擇器，id只能在同一頁面中不能重複適用。

12) 給頁面的佈局和重要的區塊加上註釋。如：<!—header -->

13) 給圖片加上alt標籤，利於搜索引擎的查詢。

14) 全部的標籤必須進行合理的嵌套。

15) 頁面的實現過程當中出現的問題是有規律的幾種：3個像素的bug、雙倍浮動空白邊距、文字溢出bug。儘量採用合理佈局能夠避免不一樣瀏覽器下所產生的問題。css的hack應該儘可能避免採用。

16) 儘量的合理的去用繼承，好處是代碼結構清晰，方便其餘修改人員辨認頁面結構、減小css的代碼的重複定義。

17) 網站上常常會出現用戶輸入一大段字符和字母以致於文字沒法正常折行，把版式破壞，這樣咱們就要參考如下樣式：word-wrap:break-word; overflow:hidden; 固然必須得有寬度屬性值。

18) 文字過長要出現省略號樣式以下：

white-space: nowrap; text-overflow:ellipsis; overflow:hidden;

19) 一個完整的表單應該包括：

<fieldset>
<legend></legend>
<label></label>
<input />
</fieldset>

20) 頁面上的列表元素除了ul ol外，咱們還能夠採用dl dt dd組合。

21) 合理採用多重樣式定義能夠有效的增長樣式的重用性。

22) 咱們要清楚那些標籤是塊狀元素和內聯元素。通常咱們能夠把css元素分爲block（塊狀）和inline（內聯）。熟悉這些元素屬性有利於咱們深刻理解css。

23) 按照推薦Css屬性書寫順序：

顯示屬性：

display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

自身屬性：   

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

文本屬性：

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor