CSS中Sprites的簡(jiǎn)單介紹
本篇內(nèi)容介紹了“CSS中Sprites的簡(jiǎn)單介紹”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為精河企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、做網(wǎng)站，精河網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
HTML代碼
代碼如下:
<body>
<!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
<!-- 以上是Sublime Text快速拼寫 -->
<ul class="sprite">
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<div class="clear"></div>
</ul>
</body>
CSS代碼
代碼如下:
<style>
body { background-color: #fc0; color:#333;}
* {margin:0; padding:0;}
ul,li {list-style: none;}
a { color:#f00; font-weight: bold; text-decoration: none;}
.sprite {margin:0 auto; width:1000px; padding-top: 50px;}
.sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; }
.sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; }
.clear { clear:both;}
</style>
JS代碼
代碼如下:
<script src="<a href="http://code.jquery.com/jquery-latest.js"></script">http://code.jquery.com/jquery-latest.js"></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出存放圖片的容器的高度;
triggerLi = $(".sprite").children("li");
//找出每一個(gè)li,放到一個(gè)數(shù)組中;
//console.log(iconH);
//在控制臺(tái)打印出容器的高度;
triggerLi.each(function () {
//遍歷數(shù)組中的每一個(gè)li
var $this = $(this),
//聲明變量賦值當(dāng)前的li;
$index = $this.index();
//聲明變量保存當(dāng)前l(fā)i的index值;
//console.log($index);
//在控制臺(tái)打印出每一個(gè)li的index值;
//console.log(iconH*$index);
//得出每一個(gè)圖片對(duì)應(yīng)的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//利用js遍歷出每一個(gè)s標(biāo)簽的背景圖片;
$this.hover(function() {
//鼠標(biāo)移入
$this.children("s").css("background-position","-132px -"+iconH*$index+"px");
}, function() {
//鼠標(biāo)移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>
IMG(右鍵保存即可,重命名all.png)
效果圖
CSS Sprites優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1.利用CSS Sprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
2.CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
3.解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。
4.更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。
缺點(diǎn)
誠(chéng)然CSS Sprites是如此的強(qiáng)大，但是也存在一些不可忽視的缺點(diǎn)，如下：
1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂；
2.CSS Sprites在開發(fā)的時(shí)候比較麻煩，你要通過photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發(fā)了一個(gè)CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測(cè)量來的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！
3.CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片，無需改的地方最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。
4.CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁面有一堆ico（圖標(biāo)）。總之很多時(shí)候大家要權(quán)衡一下利弊，再?zèng)Q定是不是應(yīng)用CSS Sprites。
“CSS中Sprites的簡(jiǎn)單介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
當(dāng)前名稱：CSS中Sprites的簡(jiǎn)單介紹
文章起源：http://aaarwkj.com/article2/gihsic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、小程序開發(fā)、網(wǎng)站維護(hù)、全網(wǎng)營(yíng)銷推廣、、服務(wù)器托管
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 定制一個(gè)微信小程序費(fèi)用多少 2021-05-30
- 微信小程序VS用戶APP 2022-08-17
- 開發(fā)微信小程序的優(yōu)勢(shì)有哪些？ 2022-08-12
- 微信小程序的優(yōu)點(diǎn)和前景小談 2023-02-07
- 微信小程序怎么申請(qǐng)？微信怎么申請(qǐng)小程序？ 2022-05-13
- 定制屬于自己的微信小程序！需要投入多少費(fèi)用 2022-05-27
- 微信小程序有哪些推廣秘訣？ 2015-09-07
- 微信小程序開發(fā)企業(yè)如何選擇適合自己的小程序功能？ 2020-12-07
- ?微信小程序搜索歷史使用 2022-07-20
- 微官網(wǎng)即微信網(wǎng)站、自適應(yīng)網(wǎng)站、微信小程序每個(gè)企業(yè)機(jī)構(gòu)都要做？ 2016-08-09
- 微信小程序要不要做一個(gè)啟動(dòng)頁？ 2023-03-21
- 微信小程序云開發(fā)平臺(tái)又有新動(dòng)作，盯上企業(yè)場(chǎng)景業(yè)務(wù) 2021-02-05