首先需要给 li 设定一个恰当的固定的宽高
比如 {width: 24px;height: 24px;}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
需要用 baocground-image: url(); 引入雪碧图
利用 background-position: X Y; 对雪碧图进行移动定位; X 为雪碧图 x 轴平移, Y 为雪碧图 y 轴平移 (xy 根据具体情况调整)
- style{
- ul>li:nth-of-type(1){
- background-image: url("./sprite.png");
- background-position: 0 0;
- height: 24px;
- width: 24px;
- }
- ul>li:nth-of-type(2){
- background-image: url("./sprite.png");
- background-position: 0 -44px;
- height: 24px;
- width: 24px;
- }
- ul>li:nth-of-type(3){
- background-image: url("./sprite.png");
- background-position: 0 -88px;
- height: 24px;
- width: 24px;
- }
- ul>li:nth-of-type(4){
- background-image: url("./sprite.png");
- background-position: 0 -132px;
- height: 24px;
- width: 24px;
- }
- ul>li:nth-of-type(5){
- background-image: url("./sprite.png");
- background-position: 0 176px;
- height: 24px;
- width: 24px;
- }
- ul>li:nth-of-type(6){
- background-image: url("./sprite.png");
- background-position: 0 -220px;
- height: 24px;
- width: 24px;
- }
- }
来源: http://www.bubuko.com/infodetail-2741788.html