声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！
为什么使用精灵图？
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。所以，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
原理
将网页中的一些背景图像整合到一张大图中（精灵图），当网页元素需要使用时，定位到精灵图中不同位置的某个小图即可。
如：我们使用这样一张精灵图作为背景图：
实现
效果：图标横排显示在页面，当点击图标后，可进入相应的页面
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list {
/*使列表显示在屏幕右上方*/
position: absolute;
right: 100px;
top: 5px;
}
.list li {
/*使列表水平排列*/
list-style: none;
width: 30px;
height: 30px;
float: left;
margin-right: 20px;
}
.list li a {
display: inline-block;
width: 30px;
height: 30px;
}
.list .qq {
background: url(imgs/sprite.png) no-repeat -20px -15px;
}
.list .post {
background: url(imgs/sprite.png) no-repeat -20px -80px;
}
.list .wechat {
background: url(imgs/sprite.png) no-repeat -20px -145px;
}
.list .sina {
background: url(imgs/sprite.png) no-repeat -20px -208px;
}
</style>
</head>
<body>
<ul class="list">
<li class="qq"><a href="https://www.qq.com/"></a></li>
<li class="post"><a href="https://tieba.baidu.com/"></a></li>
<li class="wechat"><a href="https://web.wechat.com/"></a></li>
<li class="sina"><a href="https://www.sina.com.cn/"></a></li>
</ul>
</body>
</html>