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)
blank

相关推荐

  • powershell校验哈希值_哈希校验什么意思

    powershell校验哈希值_哈希校验什么意思  在不安装任何第三方软件的情况下,我们也可在Windows中直接使用Powershell校验文件多种算法的哈希值,其中就包括:SHA1、SHA256、SHA384、SHA512、MACTripleDES、MD5、RIPEMD160算法。  使用起来也非常简单,大家可以参考如下示例:Get-FileHash[-Path文件路径][-Algorithm算法]…

  • 【SSH学习】

    【SSH学习】什么是SSH?简单说,SSH是一种网络协议(安全外壳协议),用于计算机之间的加密登录。如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露。SSH之所以能够保证安全,原因在于它采用了公钥加密。整个过程是这样的:(1)远程主机收到用户的登录请求,把自己的公钥发给用户(2)用户使用这个公钥,将登录密码加密后,发送回来。(3)远程主机用自己的私钥,解密登录密码,如果密码正确,就同意用户登录。SSH基本用法1.SSH远程登陆

  • java+毕业设计+进销存管理系统+源码+论文.rar

    java+毕业设计+进销存管理系统+源码+论文.rar【摘要】进销存管理系统是一个基于Internet的应用系统,它是一个面对当前的进销存管理工作基本还处于手工和半信息自动化处理状态而应运而生的一个基于Internet的一个完全信息自动化的系统,整个系统从符合操作简便、界面友好、灵活、实用、安全的要求出发,完成进货、销售、库存管理的全过程。企业单位只需具备访问Internet的条件即可在系统发布的站点上进行进销存的管理。在图型化的人机界面中完成日常的进销存管理工作.一方面摆脱了时间和空间的限制,另一方面有效的解决的数据共享的问题。经过实际使用证明,本文所

  • 云服务器搭建青龙面板每日自动拿京豆

    云服务器搭建青龙面板每日自动拿京豆前言:之前网上有只要扫码一下就可以每天领上百京豆和一些红包的活动,后来呢,扫码就失效了,但是呢,这背后的技术还没有失效。这白嫖活动其实就是用脚本代替我们去参与京东的各种活动,去获取红包和京豆,而这些脚本是部署在电脑上,定时去执行的,接下来,根据网上的大佬的教程,我们也来实现一下。每天100-200京豆不等,坐收渔利,快来试试吧。一、安装前的准备​青龙面板是使用Docker来安装的,理论上,只要有可以运行Docker的电脑都可以进行安装。但是呢,因为脚本要定时运行,所以最好安装在服务器上,或

    2022年10月14日
  • 考研经验-东南大学软件学院软件工程(这些基础课和专业课的各种坑和复习技巧你应该知道)

    考研经验-东南大学软件学院软件工程(这些基础课和专业课的各种坑和复习技巧你应该知道)(记录了2020考研的一些经历和自己的想法,有兴趣可看一下)考研结束后,一直想记录下自己的经历,因为各种原因,直到今天才终于动手。关于本人考研过程中整理的关于基础课和专业课的思维导图笔记,可查看本人博客:本文大概内容:一、考研相关问题1.考研前准备先说说考研之前的准备吧。若你尽早确定了考研的思想,别犹豫,越早复习越好。我想不出有什么理由,对于同一个人而言,复习时间长会比时间短的效果差。当然网上有太多人建议适当的时间就好,不用太长时间,依然考了很理想的学校。但是,你只看到了别人的成功

    2022年10月20日

发表回复

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

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