Web頁(yè)面切圖和CSS注意事項(轉載)

　　一、Web頁(yè)面切圖

　　1) Web頁(yè)面的切圖類(lèi)型可以歸納為背景（bg）、列表項目的符號（li）、內容中插入的圖片（pic）、按鈕（btn）、圖標等幾種形式（ico）ID嵌套樣式問(wèn)題。

　　2) 建議把用CSS背景加載的圖片拼合成一張圖片ID嵌套樣式問(wèn)題。這樣可減少對服務(wù)器的請求。從而提升頁(yè)面加載速度。

　　3) 除頁(yè)面頭部大圖保存格式為JPG外ID嵌套樣式問(wèn)題，其他圖片一律采用gif格式

　　二、CSS相關(guān)事項：

　　1) 所有的xhtml代碼小寫(xiě)ID嵌套樣式問(wèn)題。

　　2) 每個(gè)標簽都要有開(kāi)始和結束，且要有正確的層次,沒(méi)有結束標簽的，標簽后加上"/"ID嵌套樣式問(wèn)題。 如：img /、br /

　　3) 所有的屬性必須用引號""括起來(lái)ID嵌套樣式問(wèn)題。

　　4) 文檔類(lèi)型必須聲明，禁止文檔類(lèi)型亂用ID嵌套樣式問(wèn)題。

　　5) 所有和特殊符號用編碼表示ID嵌套樣式問(wèn)題。

　　6) 必須正確使用代碼縮進(jìn)，縮進(jìn)時(shí)使用tab(鍵盤(pán)中的TAB鍵)，禁止無(wú)縮進(jìn)、亂縮進(jìn)，禁止使用空格縮進(jìn)ID嵌套樣式問(wèn)題。

　　7) CSS加載的背景圖片要預定義寬度和高度，路徑采用絕對路徑可以直接從訪(fǎng)問(wèn)者計算機緩存中加載，提高頁(yè)面加載速度ID嵌套樣式問(wèn)題。

　　8) 要盡可能做到表現與結構完全分離，代碼中不涉及到表現元素，如style、font、bgColor、border、bID嵌套樣式問(wèn)題。

　　9) h1到h6的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢(xún)ID嵌套樣式問(wèn)題。采用繼承方式，否則個(gè)性定義就會(huì )失效。

　　10) Font的縮寫(xiě)為：樣式 粗細 大小 行高 字體 （font:italic bold 12px/30px “simsun”）ID嵌套樣式問(wèn)題。

　　11) class和id選擇器，id只能在同一頁(yè)面中不能重復適用ID嵌套樣式問(wèn)題。

　　12) 給頁(yè)面的布局和重要的區塊加上注釋ID嵌套樣式問(wèn)題。如：!—header --

　　13) 給圖片加上alt標簽，利于搜索引擎的查詢(xún)ID嵌套樣式問(wèn)題。

　　14) 所有的標簽必須進(jìn)行合理的嵌套ID嵌套樣式問(wèn)題。

　　15) 頁(yè)面的實(shí)現過(guò)程中出現的問(wèn)題是有規律的幾種：3個(gè)像素的bug、雙倍浮動(dòng)空白邊距、文字溢出bugID嵌套樣式問(wèn)題。盡可能采用合理布局可以避免不同瀏覽器下所產(chǎn)生的問(wèn)題。css的hack應該盡量避免采用。

　　16) 盡可能的合理的去用繼承，好處是代碼結構清晰，方便其他修改人員辨認頁(yè)面結構、減少css的代碼的重復定義ID嵌套樣式問(wèn)題。

　　17) 網(wǎng)站上經(jīng)常會(huì )出現用戶(hù)輸入一大段字符和字母以至于文字無(wú)法正常折行，把版式破壞，這樣我們就要參考以下樣式：word-wrap:break-word; overflow:hidden; 當然必須得有寬度屬性值ID嵌套樣式問(wèn)題。

　　18) 文字過(guò)長(cháng)要出現省略號樣式如下：

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

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

　　fieldset

　　legend/legend

　　label/label

　　input /

　　/fieldset

　　20) 頁(yè)面上的列表元素除了ul ol外，我們還可以采用dl dt dd組合ID嵌套樣式問(wèn)題。

　　21) 合理采用多重樣式定義可以有效的增加樣式的重用性ID嵌套樣式問(wèn)題。

　　22) 我們要清楚那些標簽是塊狀元素和內聯(lián)元素ID嵌套樣式問(wèn)題。一般我們可以把css元素分為block（塊狀）和inline（內聯(lián)）。熟悉這些元素屬性有利于我們深入理解css。

　　23) 按照推薦Css屬性書(shū)寫(xiě)順序：

　　顯示屬性：

　　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

021yin.com