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

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

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

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

全部评论问答未解决精华

1378325287

雪碧图中第一、二幅长宽：
width:180px;
height:42px;
背景位置大约是：
background-position:0 -35px;

0 4-1 编程挑战

2015-08-13

1378325287

*{
margin:0;
padding:0;
}

ul{list-style: none}

li{
width:100px;
display: block;
height:30px;
line-height: 30px;
overflow: hidden;
border-bottom:1px solid #dedede;
margin:0 auto;
}

0 3-2 编程练习

2015-08-13

1378325287

li h3{
font-size: 14px;
font-weight: 400
}

.cat{
width: 150px;
text-align:center;
background:#f8f8f8;
border: 1px solid #bbb;
}

0 3-2 编程练习

2015-08-13

歪嘴的肖恩

开始不理解为神马视频不能快进，，，，，原来就是防止楼下刷经验的。。。。。

0 3-1 静态页面实现

2015-08-12

歪嘴的肖恩

为啥叫 “雪碧”图呢？

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

2015-08-12

neoyoun

之前这个一直没搞懂，好多地方要定义好多background-position想着就头大

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

2015-08-08

wsitachi

这个是课程计划中基础完成的内容。。按计划来就不会听不懂了。

0 3-1 静态页面实现

2015-08-07

慕函数0883431

被30px后面那个分号坑了

17 3-4 编程练习

2015-08-06

ChristineN

若把style样式单独一个文件，图片运行的结果就会不稳定，有时正常，有时都是小红裙，哪位高手知道解决的方法，再次谢过

0 3-3 CSS Sprite 应用

2015-08-04

慕神4975613

之前一直在用。。今天知道这个还有叫法啊。。原来叫雪碧图。

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

2015-08-04

qq_夏_7

.cat-1 i{background-position:0 0;}
.cat-2 i{background-position:0 -24px;}

.cat-6 i{background-position:0 -120px;}
li i{
background:url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);
display:inline;
width:30px;
height:24px;
float:left;
}

大家参考下

0 3-4 编程练习

2015-08-03

qq_夏_7

大家都忘记了文本居中

1 3-2 编程练习

2015-08-03

qq_夏_7

这个老师讲的太快不适合初学者

0 3-1 静态页面实现

2015-08-03

我去阿拉斯加

sprite

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

2015-08-02

我去阿拉斯加

使用雪碧图可以大大较少HTTP请求次数。一次下载完毕就可以了。性能上非常好！

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

2015-08-02

首页上一页 10 11 12 13 14 15 16 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS Sprite雪碧图应用