HTML网页精灵图的使用

HTML网页精灵图的使用精灵图的使用我们在制作网页的时候有些图片是在一起的,没有办法进行插入图片,这样精灵图的使用就帮助我们解决了这一问题。一下方式为例:图片:精灵图使用的代码图片:   具体为:.good{height:30px;margin-left:-5px;background:url(image/icon.gif)no-repeat;background-posit…

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

精灵图的使用

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

图片:

HTML网页精灵图的使用

精灵图使用的代码图片:

HTML网页精灵图的使用     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。

效果图如例:

HTML网页精灵图的使用

精灵图主要就只有三句:宽/高、 背景图,坐标。

宽/高 :

width:36px;

 height:30px;

背景图:

background:url(image/icon.gif) no-repeat;

坐标:

background-position:-3px -130px;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145998.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vb教程编程实例详解pdf_vb程序设计教程答案第四版

    vb教程编程实例详解pdf_vb程序设计教程答案第四版实验8-7在教学篇例8.7的基础上增加“修改确定”按钮以及用于定位记录的按钮面板,如图2.8.5所示,并编写时间过程。解题,代码如下:先建立标准模块,代码是:TypestudtypeiNoAsIntegerstrNameAsString*20strSexAsString*1sMarkAsSingleEndType…

  • POJ3111 K Best(另类背包+二分+变态精度)

    POJ3111 K Best(另类背包+二分+变态精度)POJ3111KBest,看讨论区说数据有点变态,精度要求较高,我就直接把循环写成了100次,6100ms过,(试了一下30,40都会wa,50是4000ms)  第一次在POJ上看到下面这种东西还是很好奇的,  一个题目可以接受多种正确答案,即有多组解的时候,题目就必须被SpecialJudge.SpecialJudge程序使用输入数据和一些其他信息来判答你程序的输出,并将…

  • 卸载MySQL Connector NET无法卸载

    卸载MySQL Connector NET无法卸载卸载MySQLConnectorNET无法卸载最近安装了MYSQL数据库,安装完发现安装在了系统C盘,对于文件整理控加一丢丢强迫症的我来说,太介意了,不能忍。这里是解决办法:安装MYSQL自定义路径方法于是,开始卸载MYSQL,结果,ConnectorNET始终卸载不掉。网上看到了很多方法,删文件删注册表都无济于事,丝毫没有成功。终于,在google里找到可行的解决方法。原文网址:Cannotuninstall/repair/ChangeMySQL-Connector-net?Iss

  • 方差分析(Anova)「建议收藏」

    方差分析(Anova)「建议收藏」1.单因素方差分析:单因素方差分析:只有一个因素A对实验指标有影响,假设因素A有r个水平,分别在第i个水平下进行多次独立的观察,所得到的实验指标数据如下:A1:N(μ1,σ2)X11X12.

  • iocomp控件与iocomp控件使用教程[通俗易懂]

    iocomp控件与iocomp控件使用教程[通俗易懂]WelcometotheIocompPlotPackManual.Thismanual,inadditiontoourhelpfilesandexamplesourcecodeprojects,providesafullsuiteofdocumentationforunderstandinghowourPlotPackcomponentsareconstructed,operate,andareusedtoenhancethe

  • python的源代码下载_官方下载python源码,编译linux版本的python「建议收藏」

    python的源代码下载_官方下载python源码,编译linux版本的python「建议收藏」我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过python–V或python–version查看系统自带的python版本有一些系统命令时需要用到python2,不能卸载1、安装依赖包1)首先安装gcc编译器,gcc有些系统版本已经默认安装,通过gcc–version查看,没安装的先安装g…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号