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

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

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

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

全部评论问答未解决精华

qq_苏丹_0

生成sprite图的工具：cssgaga

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

2015-07-02

qq_苏丹_0

控制一个层可显示的区域范围大小，通过一个窗口进行背景图的滑动（通过背景图的x轴y轴定位）

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

2015-07-02

小鱼机

li标签本来就是块级元素

15 3-1 静态页面实现

2015-06-30

陆檤轮囘

移动端还是使用雪碧图比较省流量；
使用字体icon图标的时候，单单引入字体的文件和字体引用定义的css文件就差不多150kb以上了（室外访问情况--3G甚至是2G这类人还是很多，会发现很慢，体验很差），而雪碧图最多也就10kb左右，不信你试试

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

2015-06-29

赞鱼鱼

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

0 3-2 编程练习

2015-06-26

mosaice

这么简单的东西居然能说1个小时？

0 3-3 CSS Sprite 应用

2015-06-25

XinyangLi

The HTML <i> Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.

0 3-1 静态页面实现

2015-06-24

我不在

还是自己写比较简单~~刷经验的。

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

2015-06-22

n少箐

为什么图片下载不了呢

0 3-2 编程练习

2015-06-18

衍洛雨

li i{background: url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg);display: inline;width: 30px;height: 20px;float:left;margin:5px 12px 0 5px}
.cat-1 i{background-position:0 0}
.cat-2 i{background-position:0 -24px}
.cat-3 i{background-position:0 -48px}

0 3-4 编程练习

2015-06-17

衍洛雨

<head>
<meta charset="UTF-8">
h3{margin:0;padding:0}
ul{list-style: none}
li h3{font-size: 14px;font-weight: 400}
li{display: block;height: 31px;line-height: 30px;overflow: hidden;border-bottom:1px solid #ded}
.cat{width: 150px;background:#f8f8f8;border: 1px solid #bbb}
</style>
</head>

0 3-2 编程练习

2015-06-17

乱码大叔

建议大家使用网站来生成这个工具太恶心了

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

2015-06-15

乱码大叔

一直想学习的姿势今天学习了

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

2015-06-15

一起生个孩子

发现一个大问题：这代码里面只有一个ul li列表，所以li i{} 可以直接这样写。但是多个ul li列表时。在写样式li i 换成.cat li i{}就不行了

1 3-4 编程练习

2015-06-15

当好一块砖

董玉伟
为什么要浮动呢？

h3是块元素，i是行内元素，我也在想，为什么要加display:inline

0 3-3 CSS Sprite 应用

2015-06-11

首页上一页 13 14 15 16 17 18 19 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS Sprite雪碧图应用