HTML网页精灵图的使用

全栈程序员站长

发布于 2022-08-27 13:33:50

1.2K0

发布于 2022-08-27 13:33:50

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

精灵图的使用

我们在制作网页的时候有些图片是在一起的，没有办法进行插入图片，这样精灵图的使用就帮助我们解决了这一问题。一下方式为例：

图片：

精灵图使用的代码图片：

具体为：

.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。

效果图如例：