雪碧图又叫精灵图，名字很可爱很动听。但是呢，如何操作你学会了么？
做网页的时候会有很多图片，一张一张保存特别麻烦，那就可以让雪碧图来帮你，把页面所需图片整合在一张图片上，设置为元素的背景用background-image引入然后用背景定位background-position去调整元素的位置达到想要的效果。
spire.png
1560139078(1).png
第一步：在html里做出一个盒子（dt用来装精灵图，dd是字，p标签用来做三角形）
<div class="jinglingtu">
<div class="jinglingtu-top">
<dl>
<dt></dt>
<dd>问答</dd>
<p></p>
</dl>
<dl>
<dt></dt>
<dd>wiki</dd>
<p></p>
</dl>
<dl>
<dt></dt>
<dd>课程</dd>
<p></p>
</dl>
<dl>
<dt></dt>
<dd>社群</dd>
<p></p>
</dl>
</div>
<div class="jinglingtu-bottom">
<dl>
<dt></dt>
<dd>下载</dd>
<p></p>
</dl>
<dl>
<dt></dt>
<dd>知识</dd>
<p></p>
</dl>
<dl>
<dt></dt>
<dd>职业</dd>
<p></p>
</dl>
<dl>
<dt></dt>
<dd>VIP</dd>
<p></p>
</dl>
</div>
</div>
第二步：在css里做出基本样式
*{
margin: 0px;
padding: 0px;
}
.jinglingtu{
width: 232px;
height: 170px;
background: pink;
margin: 0 auto;
margin-top: 20px;
}
.jinglingtu-top{
width: 232px;
height: 85px;
background: white;
}
.jinglingtu-top dl{
width: 56px;
height: 85px;
background: white;
float: left;
}
.jinglingtu-top dl dt{
width: 30px;
height: 30px;
background: white;
margin: 0 auto;
margin-top: 16px;
}
.jinglingtu-top dl dd{
text-align: center;
font-size: 15px;
margin-top: 7px;
}
.jinglingtu-bottom{
width: 232px;
height: 85px;
background: white;
}
.jinglingtu-bottom dl{
width: 56px;
height: 85px;
background: white;
float: left;
}
.jinglingtu-bottom dl dt{
width: 30px;
height: 30px;
background: white;
margin: 0 auto;
margin-top: 16px;
}
.jinglingtu-bottom dl dd{
text-align: center;
font-size: 15px;
margin-top: 7px;
}
.jinglingtu-top p{
list-style: none;
float: left;
width: 0;
height: 0;
border: solid 6px transparent;
border-top-color: #E4E4E4;
margin: 6px 0px 0px 22px;
}
.jinglingtu dl{
border: 1px solid #E4E4E4;
}
1560147062(1).png
；
第三步：引入精灵图，操作还是写在css里
.jinglingtu-top dl:nth-child(1) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 1px;
}
.jinglingtu-top dl:nth-child(2) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -26px;
}
.jinglingtu-top dl:nth-child(3) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -52px;
}
.jinglingtu-top dl:nth-child(4) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -79px;
}
.jinglingtu-bottom dl:nth-child(1) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px -106px;
}
.jinglingtu-bottom dl:nth-child(2) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 84px;
}
.jinglingtu-bottom dl:nth-child(3) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 57px;
}
.jinglingtu-bottom dl:nth-child(4) dt{
background-image: url(../images/spire.png);
background-size:66px;
background-position: -1px 31px;
}
那么这个图就做完了：
1560147586(1).png
。
小露身手，如有失误，恭候点评，感谢阅读！
