CSS Sprite雪碧图应用_学习笔记

首页免费课 CSS Sprite雪碧图应用笔记

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

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

最热最新

品茗见南山

一个个写好麻烦。用js控制吧。至于哪个性能好一些就不知道了。 li i { background: url(http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg); } </style> <script> window.onload=function(){ var cati=document.getElementsByTagName("i"); for(var i=0;i<cati.length;i++){ var pxx=i*(-24); cati[i].style.backgroundPosition="0 "+pxx+"px"; } } </script>

查看全部

0 采集收起来源：编程练习
2018-03-22
Honghong1223

使用spite工具自动生成雪碧图： CSS Gaga 下载地址：http://www.99css.com/archives/1524

查看全部

0 采集收起来源：CSS Sprite雪碧图实现方式
2015-07-28
慕虎6560433

差不多一模一样

查看全部

2 采集收起来源：编程挑战
2015-07-27
_小鱿鱼_

给i标签设置雪碧图背景图片 li i{ background:url();/*雪碧图片*/ display：inline;/*设置成行级元素*/ width:30px; height:24px;/*因为i标签本身没有内容，所以设置宽高作为显示区*/ float:left; margin:3px 10px 0 0;/*微调*/ } 然后再，根据坐标位置给每一个i标签设置一个background-position 例如： .cat-1{background-position:0 -24px;}

查看全部

0 采集收起来源：CSS Sprite 应用
2015-07-27
_小鱿鱼_

<div><ul><li class="cat-1"><i></i><h3>服装内衣</h3></li></ul></div> <i>标签做小图标 1.用 <i> 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）； 2.<i> 比 <span> 短，但 gzip 后差异很小，不过打字可以少按三个键； 3.多数图标用的是空 <i> 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 <i> 取决于你对于遵循规范有多洁癖。每个li设置不同的class,为了设置background-position。去除li默认的黑点 ul{list-style:none} 设置h3样式 li h3{font-size:14px;font-weight:400}/*font-weight用来控制字体粗细的，也可以写文字，但是没有数字控制的精确*/ 细节：h3本身是有margin和padding的，为了使在各个浏览器展示一致，所以需要初始设为0，然后自定义margin和padding值设置li的样式： li{ display:block;/*成为块级元素*/ height:31px; line-height:31px; overflow:hidden;/*防止里面的内容溢出*/ border-bottom:1px solid #dedede;/*设置一个浅灰色底边框当下划线*/ } height与line-height（行高）一致，是为了使文字水平居中

查看全部

0 采集收起来源：静态页面实现
2018-03-22
_小鱿鱼_

使用spite工具自动生成雪碧图： CSS Gaga 下载地址：http://www.99css.com/archives/1524 不旦生成雪碧图，还会提供background-position的值

查看全部

0 采集收起来源：CSS Sprite雪碧图实现方式
2015-07-27
_小鱿鱼_

通过CSS background-position来控制坐标轴,拼合背景图的小图(x,y)为负值以雪碧图左上角的定点为(0,0)坐标

查看全部

0 采集收起来源：CSS Sprite雪碧图实现原理
2015-07-27
_小鱿鱼_

CSS Sprite :CSS雪碧图通常一些网站，为了性能优化和减少请求数目，在导航图上的小图片，并没有使用img标签，使用的是CSS Sprite技术，加速网站显示。 1.静态图片，不随用户信息的变化而变化 2.小图片，图片容量比较小 3.加载量比较大作用：家少HTTP请求数量，加速内容显示。

查看全部

0 采集收起来源：CSS Sprite雪碧图使用场景
2015-07-27
Faust_81

完成了

查看全部

0 采集收起来源：编程练习
2015-07-27
Faust_81

完成了

查看全部

0 采集收起来源：编程练习
2015-07-27
慕瓜2457231

雪碧图实现方式： spite生成工具：CSS Gaga 下载地址：http://www.99css.com/archives/1524

查看全部

0 采集收起来源：CSS Sprite雪碧图实现方式
2015-07-27
慕瓜2457231

0活在当下0 使用雪碧图：1.静态图片，不随用户信息变化而变化。 2.小图片，图片容量小。 3.加载量比较大。一些大图不建议拼成雪碧图。每请求一次，就会和服务器链接一次，建立链接是需要额外时间的减小http请求数，加速时间。能减少请求就要减少请求。

查看全部

0 采集收起来源：CSS Sprite雪碧图使用场景
2015-07-27
Despicable_me

nice

查看全部

0 采集收起来源：编程练习
2015-07-26
hou_hou

登陆和注册之间的线还没加

查看全部

0 采集收起来源：编程挑战
2015-07-26
kzzk

.cat i{background-position:0 0;} .cat-2 i{background-position:0 -24px;} .cat-3 i{background-position:0 -48px;} .cat-4 i{background-position:0 -72px;} .cat-5 i{background-position:0 -92px;} .cat-6 i{background-position:0 -116px;} .cat-7 i{background-position:0 -144px;} .cat-8 i{background-position:0 -168px;}

查看全部

0 采集收起来源：编程练习
2015-07-26