例子：
自己的练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0px; border: 0px;}
ul{list-style: none;width: 100px;}
li{height: 50px; line-height: 50px; position: relative; background: red;}
span{display: inline-block;
width: 30px;
height: 30px;
background: url("img/QQ截图20170126165355.png") no-repeat;
position: absolute;top: 10px;left: 0px;
}
a{font-size: 20px; padding-left: 40px;}
.qq{background-position: -22px -1px;}
.dl{background-position: -70px -1px;}
.sll{background-position: -45px -1px;}
</style>
</head>
<body>
<div>
<ul>
<li><span class="qq"></span><a href="#">qq</a></li>
<li><span class="dl"></span><a href="#">电量</a></li>
<li><span class="sll"></span><a href="#">360</a></li>
</ul>
</div>
</body>
</html>
显示如下：
