在線客服

24小時(shí)免費(fèi)咨詢電話：18978941786

客服時(shí)間：上午9：30~下午6點(diǎn)

當(dāng)前位置：首頁(yè)>> 技術(shù)文章 >> Web標(biāo)準(zhǔn) >> CSS Sprites優(yōu)化網(wǎng)頁(yè)代碼的方法

CSS Sprites優(yōu)化網(wǎng)頁(yè)代碼的方法

收藏分享發(fā)布日期:2012-2-12 16:30:40 編輯:admin 文章來源:網(wǎng)頁(yè)教學(xué)網(wǎng) 點(diǎn)擊率:

照貓畫虎，把你網(wǎng)站上經(jīng)常使用的web圖片元素打包——比如你的logo，RSS圖標(biāo)，還有其他不會(huì)經(jīng)常變更的東西。

使用CSS Sprites是在你盡可能地使用其他的優(yōu)化策略后最后的一招。它將你的所有圖片放在一張圖中，即你的一張CSS Sprites由10張圖片組成，那將避免9次HTTP請(qǐng)求，這減少的9次請(qǐng)求時(shí)延，正是加速的加載時(shí)間。這也有問題，跟每個(gè)HTTP請(qǐng)求的服務(wù)器開銷一樣，需由Apache的子進(jìn)程管理，占用20MB的內(nèi)存。你最好幫你的服務(wù)器進(jìn)程減少HTTP請(qǐng)求：卸載媒體到Web前端Amazon S3，諸如此類。

下面是兩個(gè)CSS Sprites，一個(gè)是Google的，一個(gè)是PaulStamatiou的。

照貓畫虎，把你網(wǎng)站上經(jīng)常使用的web圖片元素打包——比如你的logo，RSS圖標(biāo)，還有其他不會(huì)經(jīng)常變更的東西。用Photoshop或者你的圖片編輯工具，把它們放在單個(gè)的圖片里。你可以盡貼著放置圖片，但要是你稍微留點(diǎn)白再下一步選中會(huì)更簡(jiǎn)單些，然后保存圖片。

編寫CSS代碼

有了CSS Sprites，你將要用CSS選擇器對(duì)每個(gè)只顯示精靈中部分圖片的鏈接進(jìn)行處理：只要你需要的那部分。你需要知道待顯示圖片的精確大小以及位置。這步用到Photoshop中的切片工具并選出你要用的那部分的圖。對(duì)新切片右鍵單擊，選擇編輯切片。在彈出的窗口會(huì)有圖片的分辨率和位置。

在這個(gè)示例中，我選用大小為42×42px的圖，它有336px的偏移（譯注：是指左偏移）并緊貼著頂部。這樣便形成了相應(yīng)的CSS：

a.stammy, a.stammy:hover{
     background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
     display:block;
     height:42px;
     width:42px;
     text-indent:-9999px;
     overflow:hidden;
}

CSS選擇器對(duì)所有含 class="stammy" 屬性的鏈接都有效。背景屬性載入精靈圖片，然后設(shè)置背景圖位置為負(fù)值（其必為負(fù)）。如果圖片離頂部有10個(gè)像素，那背景位置應(yīng)該是“-336px -10px”。之后在CSS中設(shè)置了寬和高。我對(duì)懸停偽類（hover pseudoclass）也進(jìn)行了設(shè)置，因?yàn)橛幸淮萎?dāng)我懸停在該類的鏈接上時(shí)，會(huì)改變鏈接的懸停狀態(tài)的顏色，從而背景圖會(huì)消失。

設(shè)置溢出隱藏“解決當(dāng)你選擇要替換的文本的時(shí)候，那高亮部分會(huì)一直延伸到屏幕左側(cè)的煩人問題”，正如Rob所說。對(duì)其他所有圖片如法炮制，并對(duì)每個(gè)選擇器命名。

編寫XHTML代碼

目今你已經(jīng)對(duì)每個(gè)圖片有一些CSS選擇器。至此你已經(jīng)搞定了大問題，還差最后一步?，F(xiàn)在只需對(duì)每個(gè)選擇器創(chuàng)建鏈接。

<a class="stammy" title="Paul Stamatiou">Paul Stamatiou</a>

相當(dāng)簡(jiǎn)單吧？用CSS和鏈接設(shè)置類，將精靈的信息組合起來，只顯示精靈的一部分。雖此，因?yàn)槲覀兩踔翛]使用一個(gè)img標(biāo)簽，我們不能設(shè)置alt屬性，而這對(duì)移動(dòng)用戶、搜索引擎、屏幕閱讀器之類的來說至關(guān)重要。將文字寫在鏈接中，再用CSS文本縮進(jìn)將其移出屏幕范圍，這樣你就無需吧文字疊在圖片上而同樣具有可用性。

本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://www.absorbed3d.com/

南寧煙寒網(wǎng)絡(luò)竭誠(chéng)為您免費(fèi)提供南寧網(wǎng)站建設(shè)、南寧網(wǎng)站設(shè)計(jì)、南寧網(wǎng)站優(yōu)化、維護(hù)以及網(wǎng)站技術(shù)很方面的網(wǎng)絡(luò)服務(wù)！

南寧網(wǎng)站建設(shè)、南寧網(wǎng)絡(luò)公司咨詢熱線電話：0771-5306126 18967841786(24小時(shí)全天電話)

煙寒網(wǎng)絡(luò) - 讓你進(jìn)一步走向成功

国产高清一区二区在线_免费看肥胖女人做爰高清全过情_日韩少妇高潮抽搐_性生生活大片又黄又_粉嫩蜜臀av国产精品网站_搞黄视频免费_亚洲成a人一区二区三区_屁股翘起来趴好挨c_少妇一夜爽免费看_日本护士高潮大叫

在線客服

CSS Sprites優(yōu)化網(wǎng)頁(yè)代碼的方法