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

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

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

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

全部评论问答未解决精华

Jack_Rain

我用mac的用啥啊！

0 2-1 CSS Sprite雪碧图实现方式

2015-12-09

这里.cat和li为什么要设置相对定位呢relative

已采纳回答 / echo_kinchao

不设相对定位就无法展示自己想要的布局

2 回答 1168 浏览 3-4 编程练习

2015-12-09

saybye

老师用的是mac然后推荐了win的工具！你让和你一起用mac的同学怎么办？

0 2-1 CSS Sprite雪碧图实现方式

2015-12-09

小葱跑蛋bunny

float就直接把元素转换为块级元素了吧，这个是不是就可以直接设置宽高了？或者不设置为float，直接设置成inline-block，然后设置宽高，不知道行不行。。。

1 3-3 CSS Sprite 应用

2015-12-08

头一遍到这里果断蒙比了！！！怎么办再回头看一遍吗？

最新回答 / echo_kinchao

不懂就看到懂位置呗

3 回答 951 浏览 4-1 编程挑战

2015-12-08

太阳1993双子

终于有了一个普通话标准声音又好听的老师了。

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

2015-12-08

关于雪碧图的编程题

最新回答 / 李晓健

css中有个 background-repeat-x 可以去看一下

1 回答 1118 浏览 3-2 编程练习

2015-12-07

为什么第二个雪碧图效果出不来呢？

已采纳回答 / qq_安伊偌拉_0

.cont-3{ background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg) 0 -38;}这里的-38要加上px

2 回答 1507 浏览 4-1 编程挑战

2015-12-06

阳光雨下

看了同学代码里排名第一的代码，脑洞大开。。还有很多东西没有了解到，继续努力！

0 4-1 编程挑战

2015-12-03

这代码有问题吗？为什么雪碧图没有完整的出来？

已采纳回答 / qq_安伊偌拉_0

backgroung-position写错了，应该是background-position

1 回答 1384 浏览 3-4 编程练习

2015-12-03

阳光雨下

我纳闷为啥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

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

已采纳回答 / i爱慕客

建议直接发表在评论区就可以了。

2 回答 1074 浏览 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

首页上一页 8 9 10 11 12 13 14 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空