CSS雪碧图，就是把所有的图表，按钮和图形包含在一个图像里面。它要求：

静态图片，不随用户信息变化而变化；小图片，图片容量比较小；加载量比较大。

使用这种技术可以减少Web浏览器发出的服务器请求，显著加快下载速度。同时把小图片，按钮集中在一起，可以提高维护性。

在这里介绍一款CSS Sprite自动生成工具——CssGaga，可以快速生成雪碧图。在实际制作中，遇到很多的坑，现在总结下：

1.   坑一

html：

 <div class="cat">

         <ul>

             <li class="cat-1"><i></i><h3>服装内衣</h3></li>

             <li class="cat-1"><i></i><h3>服装内衣</h3></li>

         </ul>

     </div>

CSS样式：

 * {margin:;padding:;}

     .cat {width: 150px;background: #f8f8f8; border:1px solid #ccc;padding:0 20px;}

         ul {list-style: none;}

         li {height: 31px;line-height: 31px;overflow: hidden;border-bottom:1px solid #ccc;margin-bottom: -1px;}

         li i {display: inline-block;width: 30px;height: 24px;}

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

实际显示：

原因：是i标签设置display：inline-block，h3是块元素，单独占据一行，父元素li设置了overflow属性，所以h3下移一行，内容无法显示。

解决办法：

1.   i标签去掉display属性，改为浮动float：left；

2.   h3标签改为a标签，这种方式比较常用。

2.  坑二

设置  i 标签和h3内容之间的距离，因为 i 标签是浮动的，h3文字内容会靠着i标签，需要设置一定的间距。在这里，可以设置 i 标签的外边距margin，这样两者之间的距离会拉开。i已经脱离文档流，这里的话，就相当于文字的环绕。

 li i {float:left;width: 30px;height: 24px;background: url(sidebar.png);margin: 3px 10px 0 0 ;}

修改前：修改后：

3.坑3

       实际background-position的移动距离和图标的高度（会影响x轴的移动距离）和宽度（会影响Y轴的移动距离）有关系

4.最终的代码如下：

 <style>

     * {margin:0;padding:0;}

     .cat {width: 150px;background: #f8f8f8; border:1px solid #ccc;padding:0 20px;}

         ul {list-style: none;}

         li {height: 31px;line-height: 31px;border-bottom:1px solid #ccc;overflow: hidden;margin-bottom: -1px;}

         li i {float:left;width: 30px;height: 24px;background: url(sidebar.png);margin-top: 4px;margin-right: 3px;}

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

         .cat-1 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 -96px;}

         .cat-6 i {background-position: 0 -120px;}

         .cat-7 i {background-position: 0 -144px;}

         .cat-8 i {background-position: 0 -168px;}

         .cat-9 i {background-position: -40px 0;}

     </style>

 </head>

 <body>

     <div class="cat">

         <ul>

             <li class="cat-1"><i></i><h3>服装内衣</h3></li>

             <li class="cat-2"><i></i><h3>鞋包配饰</h3></li>

             <li class="cat-3"><i></i><h3>运动户外</h3></li>

             <li class="cat-4"><i></i><h3>珠宝手表</h3></li>

             <li class="cat-5"><i></i><h3>手机数码</h3></li>

             <li class="cat-6"><i></i><h3>办公家电脑</h3></li>

             <li class="cat-7"><i></i><h3>护符彩妆</h3></li>

             <li class="cat-8"><i></i><h3>母婴用品</h3></li>

             <li class="cat-9"><i></i><h3>其他分类</h3></li>

         </ul>

     </div>

 </body>

效果图如下：

后续在涉及到小图标比较多的情况下，可以制作雪碧图，使用 i标签，然后通过控制对应背景图片的X轴和Y轴距离来实现显示不同图表的效果。

sprite学习的更多相关文章

  1. cocos代码研究（1）sprite学习笔记

    各种方法创建Sprite和Animate //图片创建法 参数一:图片资源路径 参数二:Rect选区 auto sprite = Sprite::create(, )); addChild(sprit ...

  2. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. iOS7 Sprite Kit 学习

    iOS7 Sprite Kit 学习 iOS 7有一个新功能 Sprite Kit 这个有点类似cocos2d 感觉用法都差不多.下面简单来介绍下Sprite Kit About Sprite Kit ...

  4. Cocos2d-x 3.1.1 学习日志7--7分钟让你了解cocos2d-x3.1.1 Sprite精灵类

    精灵(Sprite)是游戏里面的角色,比方敌人.游戏里面运动的物体等等,所以精灵是游戏里面一个很常见的概念.差点儿无处不在. 在Cocos2D-x里面精灵是用Sprite类来进行表示的,它能够用一张图 ...

  5. Cocos2d-x 3.2 学习笔记（五）Sprite Node

    游戏中最重要的元素Sprite精灵,关于精灵的创建,精灵的控制等等. 涉及到的类Class: AnimationFrame 动画帧. Animation 动画对象:一个用来在精灵对象上表现动画的动画对 ...

  6. cocos2d-x 3.1.1 学习笔记［2］Sprite 精灵

    Sprite应该是用到最多的一个类吧.无法想像一个游戏没有精灵将怎样进行愉快的玩耍. Sprite继承于Node 和 TextureProtocol. Sprite是一个2d的图像. Sprite能够 ...

  7. ios学习之路四（新建Sprite Kit 项目的时候出现apple LLVM 5.0 error）

    在新建sprite kit 项目的时候出现"apple LLVM 5.0 error" 解决方法 在网上搜索,stackoverflow 上是这么说的点击打开链接.按照他的我也没解 ...

  8. Cocos2d-x shader学习3： sprite描边(Outline)

    Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果.所以本篇文章只针对于sprite来实现描边效果 ...

  9. Cocos2d-x 3.x 学习笔记(6)：Sprite SpriteFrameCache Texture2D TextureCache

    1. 概述 TextureCache是对Texture2D纹理的缓存,SpriteFrameCache是对SpriteFrame的缓存,每个SpriteFrame是对Texture2D的封装,Spri ...

随机推荐

  1. jun引导1.04可以让N3050支持6.2

    1.03引导用在3050可以安装 但是安装后找不到dsm 需要手动插拔电源才可以解决 偶尔还会死机 1.04可以引导3050安装6.2 23739 安装24922正常,但是moments传照片后会死机 ...

  2. IO流11 --- 缓冲流(字符型)实现文本文件的复制 --- 技术搬运工（尚硅谷）

    方法一:读到指定字符数组 @Test public void test7(){ BufferedReader br = null; BufferedWriter bw = null; try { br ...

  3. 路飞学城-Python爬虫集训-第二章

    本次爬虫集训的第二次作业是web微信. 先贴一下任务: 作业中使用到了Flask. Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模 ...

  4. 牛客NOIP暑期七天营-TG1 赛后题解

    目录 牛客NOIP暑期七天营-提高组1 A-最短路 题目描述 link 题解 代码 B-最小生成链 题目描述 link 题解 代码 C-最小字典最短路 题目描述 link 题解 Update 牛客NO ...

  5. gethostname gethostbyname gethostbyaddr 获得主机相关信息

    网络编程里经常需要获得主机的相关信息,下面围绕相关的函数以及用到的结构来说明. 获得主机名:int gethostname( char FAR *name, //[out] Pointer to a ...

  6. Intelij Idea 2016破解

    在注册时选择License server,输入http://www.iteblog.com/idea/key.php,点击OK

  7. PAT甲级——A1057 Stack

    Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...

  8. Spring-session整合到Redis

    闲来无事,学习一下spring的session管理,作为一个初学者,我了解到了如下内容: 1.为何要用Spring-session 在传统单机web应用中,一般使用tomcat/jetty等web容器 ...

  9. C#——找出实现某个接口的所有类 - Hello World - CSDN博客

    原文:C#--找出实现某个接口的所有类 - Hello World - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u0125260 ...

  10. javaWeb-监听器Listener

    监听器Listener (一)监听器Listener javaEE包括13门规范 在课程中主要学习 servlet技术 和 jsp技术 其中 servlet规范包括三个技术点:servlet  lis ...