一张大图片有多个小图片

这个页面也是我看到别人的写的,感觉不错,就自己留下了为了以后自己可以容易找到,也希望可以方便到别人。

写这个页面

需要注意的是:

1.写每一个小图片的位置时候,要用id,这样等级就高了,不然不起作用。

2.因为每个图片的大小位置距离是差不多的。加入是30px, 那么第一个位置就是(-20px,-20px),因为位置是从(0,0)左上开始的,现在平移是  往右下走,就好比第四象限,按(-20n  px, - 20n  px)走。

3.引入的这个图片是一样的只是颜色不一样,都放到父级里,一个是现在的状态,一个是鼠标划过的状态,位置都不用变就可以换图片了。

 

 

 

<!doctype html>

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>背景background-position切图</title>
    <style>
        .showImage{
            background-imageurl(9pic2.jpg);
            width100px;
            height100px;
        }
        .showImage<a href="javascript:;" target="_blank" class="baidu-highlight">:hover</a>{
            background-imageurl(9pic1.jpg);
        }
        ul{
            <a href="javascript:;" target="_blank" class="baidu-highlight">list-style</a>: none;
        }
        ul li{
            floatleft;
            margin20px;
        }
        #item1{
            background-position0 0;
        }
        #item2{
            background-position-100px 0;
        }
        #item3{
            background-position-200px 0;
        }
        #item4{
            background-position0 -100px;
        }
        #item5{
            background-position-100px -100px;
        }
        #item6{
            background-position-200px -100px;
        }
        #item7{
        background-position0 -200px;
        }
        #item8{
            background-position-100px -200px;
        }
        #item9{
            background-position-200px -200px;
        }
    </style>
    </head>
    <body>
        <div class="container">
            <ul>
                <li id="item1" class="showImage"></li>
                <li id="item2" class="showImage"></li>
                <li id="item3" class="showImage"></li>
                <li id="item4" class="showImage"></li>
                <li id="item5" class="showImage"></li>
                <li id="item6" class="showImage"></li>
                <li id="item7" class="showImage"></li>
                <li id="item8" class="showImage"></li>
                <li id="item9" class="showImage"></li>
            </ul>
        </div>
    </body>
</html>

 

转载于:https://www.cnblogs.com/zxhh/p/6839843.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372203.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中如何调用dal接口案例_关于Java:接口的目的

好吧&#xff0c;我认为接口是一种强制对象实现一定数量功能的方法&#xff0c;而不必使用继承。有点像合同。我半明白他们的意思。但是&#xff0c;如果界面中的所有内容都是&#xff1a;public interface animal{void eat(object food);}它没有这样的实现&#xff0c;那么无论…

Android Studio混淆

这一篇说一下Android Studio的代码混淆&#xff1a; 第一步&#xff1a;要想使混淆生效&#xff0c;要修改项目&#xff08;App&#xff09;下的build.gradle一处内容&#xff1a;minifyEnabled 的值 设置为true&#xff0c;当前项目就可以使用混淆了。 apply plugin: com.and…

内存访问模式很重要

在高性能计算中&#xff0c;通常会说高速缓存未命中的代价是算法的最大性能损失。 多年来&#xff0c;处理器速度的提高大大超过了延迟到主内存的速度。 通过更宽的多通道总线&#xff0c;到主内存的带宽已大大增加&#xff0c;但是延迟并未显着减少。 为了掩盖这种延迟&#x…

上传头像将光标去掉

οnfοcus"this.blur();" unselectable"on" οnfοcus"this.blur();"支持火狐&#xff0c;谷歌等主流浏览器 unselectable支持ie浏览器转载于:https://www.cnblogs.com/jar-gon/p/6841239.html

java底层 文件操作_JAVA的文件操作【转】

11.3 I/O类使用由于在IO操作中&#xff0c;需要使用的数据源有很多&#xff0c;作为一个IO技术的初学者&#xff0c;从读写文件开始学习IO技术是一个比较好的选择。因为文件是一种常见的数据源&#xff0c;而且读写文件也是程序员进行IO编程的一个基本能力。本章IO类的使用就从…

JAVA多线程,真的能提高效率吗

举个栗子 比如挖一个隧道&#xff0c;有2种开工方法1、只在山的一头挖&#xff0c;直至挖到山的另一头&#xff0c;从而打通隧道&#xff0c;这可以看成是单线程 2、在山的两头挖&#xff0c;同时开工&#xff0c;最后在山的中间接通&#xff0c;从而打通隧道&#xff0c;这感觉…

Java 8:测试Lambda水

Java 8大约有一年的时间了&#xff0c;它具有我非常期待的语言功能&#xff1a; Lambda Expression 。 令人遗憾的是&#xff0c;另一个重要功能Java平台模块已延迟到Java9。但是&#xff0c;将lambda表达式&#xff08;或闭包&#xff09;添加到该语言中将使Java编程变得更好。…

java定义js函数_JS中可以先使用函数,然后再定义.

首先要说明的,下面这种方式是对的,虽然不知道为什么,很奇怪为什么可以先使用,再定义,希望有了解的人可以给个说法.hello(www.openj.cn);function hello(name){alert("hello " name)};本文首发于 http://blog.openj.cn下面的这种定义函数方式,对于写一些比较复杂的代码…

基于阀值的工作流引擎设计

最近在做工作流处理流程部分的工作&#xff0c;顺便研究了一下工作流引擎的一些设计理念和原理。由于以前接触过人工智能神经网络的一些东西&#xff0c;发现工作流引擎和神经网络还是颇有一些相似之处&#xff0c;都是满足一定的条件下向下一个节点传递。在神经网络的神经元中…

Git之安装管理

1.Git安装部署 Git是分布式的版本控制系统&#xff0c;我们只要有了一个原始Git版本仓库&#xff0c;就可以让其他主机克隆走这个原始版本仓库&#xff0c;从而使得一个Git版本仓库可以被同时分布到不同的主机之上&#xff0c;并且每台主机的版本库都是一样的&#xff0c;没有主…

Java执行程序服务类型

ExecutorService功能是Java 5附带的。它扩展了Executor接口&#xff0c;并提供了线程池功能来执行异步简短任务。 使用Java 6提供的ExecutorService接口有五种异步执行任务的方法。 ExecutorService execService Executors.newCachedThreadPool&#xff08;&#xff09;; 这…

MySQL的主动优化和被动优化_MySQL“被动”性能优化汇总!

年少不知优化苦&#xff0c;遇坑方知优化难。 ——村口王大爷本文内容导图如下&#xff1a;我之前有很多文章都在讲性能优化的问题&#xff0c;比如下面这些&#xff1a;当然&#xff0c;本篇也是关于性能优化的&#xff0c;那性能优化就应该一把梭子吗&#xff1f;还是要符合一…

python2

一、管理库的安装 安装pip 提示报错&#xff1a;安装pip提示No module named setuptools Windows环境下Python默认是没有安装setuptools这个模块的&#xff0c;这也是一个第三方模块。下载地址为http://pypi.python.org/pypi/setuptools。下载后直接运行ez_setup.py 参考地址&…

Java Mybatis

Mybatis转载于:https://www.cnblogs.com/leading-index/p/6853031.html

Java例外:java lang NoSuchMethodError

如果查看错误消息java.lang.NoSuchMethodError&#xff0c;您可能会理解Java虚拟机正在尝试向我们表明您调用的方法在类或接口中不可用。 您还可能在执行没有公共static void main&#xff08;&#xff09;方法的类时抛出此错误。要了解其背后的原因&#xff0c;请阅读本文。 …

【图】最短路径——Floyed算法和Dijkstra算法

最短路径问题(floyed.cpp dijkstra.cpp) 题目描述平面上有n个点(n<100)&#xff0c;每个点的坐标均在-10000&#xff5e;10000之间。其中的一些点之间有连线。若有连线&#xff0c;则表示可从一个点到达另一个点&#xff0c;即两点间有通路&#xff0c;通路的距离为两点间的…

java的empty_Java Stack empty()方法与示例

堆栈类empty()方法empty()方法在java.util包中可用。empty()方法用于检查此堆栈是否为空。empty()方法是一个非静态方法&#xff0c;只能通过类对象访问&#xff0c;如果尝试使用类名称访问该方法&#xff0c;则会收到错误消息。在检查空状态时&#xff0c;empty()方法不会引发…

Java并发– CyclicBarrier示例

Java中的CyclicBarrier是JDK 5中java.util.Concurrent包中引入的同步器&#xff0c;以及其他并发实用程序&#xff08;如Counting Semaphore &#xff0c; BlockingQueue &#xff0c; ConcurrentHashMap等&#xff09;。CyclicBarrier与CountDownLatch类似&#xff0c;我们在上…

java i o总结_Java I/O 总结

一、IO流的三种分类方式1.按流的方向分为&#xff1a;输入流和输出流2.按流的数据单位不同分为&#xff1a;字节流和字符流3.按流的功能不同分为&#xff1a;节点流和处理流二、IO流的四大抽象类&#xff1a;字符流&#xff1a;Reader Writer字节流&#xff1a;InputStream(读数…

try...catch 语句

一般情况下&#xff0c;我们很少用到 try...catch 语句&#xff0c;但是有时候为了测试代码中的错误&#xff0c;也有可能会用到。小白我也在工作中用到过。那么好的程序设计&#xff0c;什么时候会用到呢&#xff1f; try...catch 一般用来捕获宿主对象或者ECMAScript抛出的异…