CSS Sprite雪碧图应用_技术问答

首页免费课 CSS Sprite雪碧图应用问答

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

                    查看讲师更多课程 
                    远人讲师的其他课程
                
电商网站前端架构
中级·101313
免费课程
                                
固定边栏滚动特效
初级·38889
免费课程
                                
认识响应式布局
中级·132112
免费课程
                                
Fiddler工具使用
中级·63646
免费课程
                                
                难度初级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.73
                            188人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.8
                                简洁易懂
                            
                                9.6
                                逻辑清晰

全部评论问答未解决精华

小新在编程

这里为什么要给<i>,设置display:block呢, <i>是行内标签,不会独占一行,它没有背景,不能设置背景图片,而这里我们是需要设置背景图片的,所以必须block,不然没有效果.如果你觉得不妥,可以用<div>来显示,当然最好的方式是建议大家到电商网站,用浏览器去看看他们是怎么实现这个小图标的,用的什么标签, 是Css雪碧图,还是其他什么的.掌握最前沿的技术方法来实现,毕竟CSS Sprite不是最好最完美的方式

1 3-3 CSS Sprite 应用

2016-08-24

小新在编程

这里也可以不用<i>标签放图片,也可以用其他的标签, 最好是便于代码维护,其实这里可以设置<i> display: inline-block,这样既可以显示图标,又不需要float,也不会独占一行. 很方便,建议这样设置, 因为float对后面的元素是有影响的,要清楚浮动,clear:both

2 3-3 CSS Sprite 应用

2016-08-24

劫盎

一直在等老师讲那个cssgaga工具，没想到雪碧图只是这样而已，太令我失望了

0 4-1 编程挑战

2016-08-22

劫盎

一个不小心不知道点了什么还差一步写完，全没了，我还能说什么，不过很简单，没有再来第二遍的必要

0 4-1 编程挑战

2016-08-22

劫盎

我以为是教怎么做这些图片，原来是指显示位置，这么高大上的叫法

0 1-2 CSS Sprite雪碧图实现原理

2016-08-22

_许予南

1.25X 食用更佳

1 1-2 CSS Sprite雪碧图实现原理

2016-08-21

四豆

雪碧图的优点：1、减少http访问次数；
缺点：1、内存缺陷；2、页面缩放有暴露风险3、对爬虫不友好
总结：食之无味，弃之可惜

5 3-1 静态页面实现

2016-08-19

林希小岸

多接触一下，还是不错

0 1-2 CSS Sprite雪碧图实现原理

2016-08-19

狂热飞鸟

很受用,感谢楼主解惑,虽然代码有些微的瑕疵,但是不影响整体课程效果,赞一个!

2016-08-18

雪碧图效率问题

最新回答 / charsandrew

第一次请求就会把图片放到缓存里，后面会先从缓存里查找。

3 回答 1018 浏览 3-3 CSS Sprite 应用

2016-08-11

qq__kui

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;}

0 3-4 编程练习

2016-08-10

EricJJ

2016-08-10

EricJJ

不错了解了雪碧图

2016-08-10

慕婉清5048815

原来这个是叫雪碧图~

0 1-1 CSS Sprite雪碧图使用场景

2016-08-04

sunshine_haha

CSS display:inline和float:left两者区别

①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高

0 3-3 CSS Sprite 应用

2016-07-31

首页上一页 4 5 6 7 8 9 10 下一页尾页

开始学习

课程须知: 您至少具备HTML/CSS基础知识。

老师告诉你能学到什么？: 1.学会CSS Sprite雪碧图制作方法。2.学会CSS Sprite雪碧图的使用方法。

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS Sprite雪碧图应用

雪碧图效率问题