亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
這里為什么要給<i>,設置display:block呢, <i>是行內標簽,不會獨占一行,它沒有背景,不能設置背景圖片,而這里我們是需要設置背景圖片的,所以必須block,不然沒有效果.如果你覺得不妥,可以用<div>來顯示,當然最好的方式是建議大家到電商網站,用瀏覽器去看看他們是怎么實現這個小圖標的,用的什么標簽, 是Css雪碧圖,還是其他什么的.掌握最前沿的技術方法來實現,畢竟CSS Sprite不是最好最完美的方式
這里也可以不用<i>標簽放圖片,也可以用其他的標簽, 最好是便于代碼維護,其實這里可以設置<i> display: inline-block,這樣既可以顯示圖標,又不需要float,也不會獨占一行. 很方便,建議這樣設置, 因為float對后面的元素是有影響的,要清楚浮動,clear:both
一直在等老師講那個cssgaga工具，沒想到雪碧圖只是這樣而已，太令我失望了
一個不小心不知道點了什么還差一步寫完，全沒了，我還能說什么，不過很簡單，沒有再來第二遍的必要
我以為是教怎么做這些圖片，原來是指顯示位置，這么高大上的叫法
1.25X 食用更佳
雪碧圖的優點：1、減少http訪問次數；
缺點：1、內存缺陷；2、頁面縮放有暴露風險3、對爬蟲不友好
總結：食之無味，棄之可惜
多接觸一下，還是不錯
很受用,感謝樓主解惑,雖然代碼有些微的瑕疵,但是不影響整體課程效果,贊一個!

最新回答 / charsandrew
第一次請求就會把圖片放到緩存里，后面會先從緩存里查找。
ul i{background:url("http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg") no-repeat;
}
.cat-1 i{background-position:0 0;}
.cat-2 i{background-position:0 -24px;}
.cat-3 i{background-position:0 -48px;}
<script type="text/javascript">
alert('233');
</script>
不錯了解了雪碧圖
原來這個是叫雪碧圖~
CSS display:inline和float:left兩者區別

①display:inline:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行布局”形式!(行布局:其表現形式始終以行進行顯示) ②float:left:指定元素脫離普通的文檔流而產生的特別的布局特性。并且float必需應用在塊級元素之上，也就是說浮動并不應用于內聯標簽。或者可以說如果應用了float這個元素將被指定為塊級元素。 那么兩者的區別顯而易見:display:inline元素不能設置寬高，因為它屬于行布局，其特性是在一行里進行布局，所以不能被設定寬高
首頁上一頁45678910下一頁尾頁
課程須知
您至少具備HTML/CSS基礎知識。
老師告訴你能學到什么？
1.學會CSS Sprite雪碧圖制作方法。2.學會CSS Sprite雪碧圖的使用方法。

微信掃碼，參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號
友情提示：

您好，此課程屬于遷移課程，您已購買該課程，無需重復購買，感謝您對慕課網的支持！

本次提問將花費2個積分

你的積分不足，無法發表

為什么扣積分？

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分？

舉報

0/150
提交
取消