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

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

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

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

全部评论问答未解决精华

阳光雨下

我纳闷为啥inline能设置宽高，后来想到浮动会把元素转换成inline-block元素。= =好吧。设置<i>的inline与<li>的block意义在哪。。

2 3-3 CSS Sprite 应用

2015-12-03

阳光雨下

*{margin:0;padding:0;}
ul{list-style;none;}
li h3{font-size:14px;font-weight:400;text-align:center;}
li{display:block;width:130px;height:31px;line-height:31px;overflow:hidden;border-bottom:1px solid #dedede;margin:0 auto;}
.cat{width:150px;background:#f8f8f8;border:1px solid #bbb;}

0 3-2 编程练习

2015-12-02

小猪版纳

建议：技巧是好的，能结合 margin属性值为负数的情况一起讲解比较好，以第四象限为基准尽快能达到效果，却是不容易理解。还有那个width:30px后面的分号。imooc发展太快，细小的错误好多，希望继续改进吖。
margin:30px 后面少了个分号吖！！！！

0 3-4 编程练习

2015-12-02

羽缘

.cat-1 i{background-position:0 0;}
.cat-2 i{background-position:0 -24;}
.cat-3 i{background-position:0 -48;}
.cat-4 i{background-position:0 -72;}
.cat-5 i{background-position:0 -96;}
.cat-6 i{background-position:0 -120;}
.cat-7 i{background-position:0 -144;}
.cat-8 i{background-position:0 -168;}

0 3-4 编程练习

2015-12-02

羽缘

li i {
background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
}

0 3-4 编程练习

2015-12-02

单单happy

因为用过雪碧图，正好1个小时，就点进来看，老师确实帅呆了。http://www.spritecow.com/这个网址用起来还不错。

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

2015-12-02

魚小水

这个老师的口语真是这些老师里最标准的了!!!喜欢!!!

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

2015-11-24

筱余

最后一个分号确实可以不写，但是添加新代码是要记得补上。

1 3-4 编程练习

2015-11-20

smartone

老师这出得好，代码写对了，还得注意小细节，小小的一个分号，已经让很多同学抓狂了，哈哈

0 3-4 编程练习

2015-11-20

慕码人0911192

慢慢拨开了以前的疑惑！

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

2015-11-20

zly201010

喜欢这个老师的课程，语速慢，讲得也详细。

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

2015-11-17

慕后端8523537

在li i中添加一句background
.cat-2 i{background-position:0 -24px;}
.cat-3 i{background-position:0 -72px;}
.cat-4 i{background-position:0 -96px;}
.cat-5 i{background-position:0 -120px;}
.cat-6 i{background-position:0 -144px;}
.cat-7 i{background-position:0 -168px;}
.cat-8 i{background-position:-40px 0;}

0 3-4 编程练习

2015-11-16