一、Web頁面切圖

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

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

3) 除頁面頭部大圖保存格式為JPG外，其他圖片一律采用gif格式

二、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