一，首先来了解一下什么是CSS雪碧图
- 来看这样的一个网页
-
这是怎么办到的呢？ 答案就是，使用CSS雪碧图，也就是多张图片合成为一张图片，然后通过位置的偏移使其与页面元素接合在一起所制成的
-
使用雪碧图的好处是什么？ 1.因为多图合成为了一张图，所以减少了网页图片的请求，加快了网页的加载速度； 2.可以重复使用；
二，现学现做CSS雪碧图，让我们来一步步实现类似下面图片这样的效果吧
1.首先，我们需要一些小图片，可以在阿里巴巴的iconfont里面下载到这些图片
2.下载完毕后打开下载的文件可以看到这些图片，为了后面的方便我将他们命名为了1，2，3，4，5，6
3.然后网上搜索一下雪碧图合成网站，个人推荐雪碧图合成，使用方式如下图：
4.添加完毕点击创建后，出现下图，点击下载png格式图片就出现这个合成图的网络连接了，这样的一张多小图合成的大图就是一张雪碧图
5.创建html文件，并写入一个列表代码，为了方便后面的设置，我添加了class选择器；
6.复制前面我们得到的雪碧图网址url，添加进每一个列表li元素中，并设置其不重复以及它的尺寸为你想要的尺寸，顺便去掉列表的默认样式，得到下面这样的图；
7.设置li元素的文本格式以及宽高等样式，然后添加边框，得到如下图：
8.最后一步，使用前面添加的class选择器对每个li元素单独设置背景雪碧图所要显示的偏移位置，例如，第三个li元素显示是便便的图，就这样设置：
9.最终效果图显示以及代码一览：
