大家好，又见面了，我是你们的朋友全栈君。
精灵图的使用
我们在制作网页的时候有些图片是在一起的，没有办法进行插入图片，这样精灵图的使用就帮助我们解决了这一问题。一下方式为例：
图片：
精灵图使用的代码图片：
具体为：
.good{
height:30px;
margin-left:-5px;
background:url(image/icon.gif) no-repeat;
background-position:-3px -130px;}
.safety{
height:36px;
margin-left:-5px;
background:url(image/icon.gif) no-repeat;
background-position:0px -166px;}
.free{
height:30px;
margin-left:-5px;
background:url(image/icon.gif) no-repeat;
background-position:0px -209px;}
.people{
height:35px;
margin-left:-5px;
background:url(image/icon.gif) no-repeat;
background-position:0px -245px;}这是进行对图片的操作，插入图片然后设置其宽高以及你所需要的图片在整体图片的什么位置，也就是他的坐标轴。
之后呢就是你要把图片插入到什么位置，在位置上进行插图：
<ul class="a"><ol class="good"><a href="#" style="margin-left:-5px;" >便宜有好货！</a>超过7000万件商品任您选。</ol>
<ol class="safety"><a href="#" style="margin-left:-5px;">买卖更安全！</a>交易超安全。</ol>
<ol class="free"><a href="#" style="margin-left:5px;">免费开网店！</a>轻松赚钱交友。</ol>
<ol class="people"><a href="#" style="margin-left:5px;">超人气社区！</a>精彩活动每一天</ol>因为我用的是<ul><ol></ol></ul>，所以我在ol中输入class。
效果图如例：
精灵图主要就只有三句：宽/高、 背景图，坐标。
宽/高 ：
width:36px;
height:30px;
背景图：
background:url(image/icon.gif) no-repeat;
坐标：
background-position:-3px -130px;
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/145998.html原文链接：https://javaforall.net
