HTML网页精灵图的使用

精灵图的使用

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

图片：

精灵图使用的代码图片：

具体为：

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

HTML网页精灵图的使用相关推荐

版心和精灵图的介绍与使用，以及做网页的注意事项
版心版心,顾名思义,就是居于板块的正中心. 版心的用法也非常简单, 具体的代码如下 div {width:800px;height:300px;background color:red;margin ...
html精灵图坐标如何确定,如何使用HTML中的精灵图
在我们进行网页布局的时候经常会遇到以下的情况一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图, 1.png 如果一张图片一张图片的去引入,不仅费时费力,还费资源. 那这个时候该如何去快速 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
教你玩转CSS 精灵图/雪碧图
目录精灵图/雪碧图图像拼合 - 简单实例图像拼合 - 创建一个导航列表图像拼合s - 悬停效果精灵图/雪碧图精灵图/雪碧图就是图像拼合也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
一个大图切成几个小图加载速度更快_CSS精灵图技术（提高页面的加载速度）
未来2088 2019-11-28 18:00:00 哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
精灵图使用——如何利用js循环实现精灵图设置
首先对于以下这些图标的设置,应该如何实现呢? 如果是还未学javascript时,我们一般会通过css样式一个个的给它们设置 background-position属性,这样会显得十分鸡肋!很麻烦!! ...
CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align
15. 常见技巧 15.1 精灵图出现原因一个网页往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...

HTML网页精灵图的使用

HTML网页精灵图的使用相关推荐

最新文章

热门文章