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

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

CSS Sprite雪碧图应用

                
                远人
            Web前端工程师

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

最热最新

我不知其二

登陆框表单

查看全部

0 采集收起来源：编程挑战
2015-12-15
我不知其二

雪碧图的加载和位置的设置

查看全部

0 采集收起来源：编程练习
2015-12-15
我不知其二

cssgaga软件用于生成css雪碧图

查看全部

0 采集收起来源：CSS Sprite雪碧图实现方式
2015-12-15
猫哥么

注意思考

查看全部

0 采集收起来源：编程练习
2015-12-14
暴走大熊

快速生成雪碧图的工具：CSS gaga

查看全部

0 采集收起来源：CSS Sprite雪碧图实现方式
2015-12-14
猫哥么

css sprite<br> 静态图片，不随用户信息变化而变化。<br> 小图片，容量比较小<br> 加载量比较大。（目的是：有效的减少http请求的数量）<br> 大图不建议拼成雪碧图，加载时间长

查看全部

0 采集收起来源：CSS Sprite雪碧图使用场景
2018-03-22
weibo_我叫束小雅_0

原理：通过css的背景定位属性：background-position来控制坐标轴,拼合背景图的小图(x,y)为负值以雪碧图左上角的定点为(0,0)坐标当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。

查看全部

0 采集收起来源：CSS Sprite雪碧图实现原理
2015-12-13
慕荣桑

cssscrpite雪碧图静态图片，不随用户信息变化而变化。小图片，容量比较小加载量比较大。（目的是：有效的减少http请求的数量）大图不建议拼成雪碧图，加载时间长

查看全部

0 采集收起来源：CSS Sprite雪碧图使用场景
2015-12-13
隐于世

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin: 0;padding: 0;list-style: none;font-size: 12px; font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";} img{vertical-align: middle; border:none 0} a{cursor: pointer;text-decoration: none} input,select{vertical-align: middle} form{padding:10px;width:200px;background-color:#EBF3FA;overflow:hidden;} input[type="text"],input[type="password"]{width:194px;height:38px;font-size:15px;border:1px solid #D4D9E3;border-radius:4px; margin-bottom:15px;text-indent:2em;} input[type="checkbox"]{margin:0;cursor:pointer;} label{vertical-align: middle;color:#67696B;} a{float:right;color:#0460AD;} button{width:194px;height:40px;background:url(http://img1.sycdn.imooc.com//539a972b00013e9102280177.jpg);} hr{height:1px;border:none;border-top:1px solid #D6D6D6;width:192px;} button[type="submit"]{margin:15px 0 10px;} button[type="button"]{background-position:0 -38px;margin:10px 0 0;}

查看全部

0 采集收起来源：编程挑战
2018-03-22
rainbow12345 07:28

line-height:31px; height:31px; 设置成跟一样的值的作用：垂直居中.

查看全部

0 采集收起来源：静态页面实现
2015-12-12
rainbow12345 01:24

原理：通过css的背景定位属性：background-position来控制坐标轴,拼合背景图的小图(x,y)为负值以雪碧图左上角的定点为(0,0)坐标当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0; 实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。

查看全部

0 采集收起来源：CSS Sprite雪碧图实现原理
2015-12-12
rainbow12345 03:41

Sprite雪碧图使用规则

查看全部

0 采集收起来源：CSS Sprite雪碧图使用场景
2015-12-12
克里斯雷德菲尔德

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置

查看全部

0 采集收起来源：CSS Sprite雪碧图实现原理
2015-12-11
克里斯雷德菲尔德

cssscrpite雪碧图静态图片，不随用户信息变化而变化。小图片，容量比较小加载量比较大。（目的是：有效的减少http请求的数量）大图不建议拼成雪碧图，加载时间长 [ 查看全文 ]

查看全部

0 采集收起来源：CSS Sprite雪碧图使用场景
2015-12-11
慕瓜4458176

①display:inline:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示) ②float:left:指定元素脱离普通的文档流而产生的特别的布局特性。并且float必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者可以说如果应用了float这个元素将被指定为块级元素。那么两者的区别显而易见:display:inline元素不能设置宽高，因为它属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。简单的说就是float可以设置宽高，然而display:inline;虽然也会浮动，但是他不能设置宽高。

查看全部

0 采集收起来源：CSS Sprite 应用
2015-12-11