1

 <ul id="u1">
<li class="sea one show1">海运</li>
<li class="air one">空运</li>
<li class="express one">快递</li>
<li class="eche one">陆运</li>
</ul>

  2:

#u1 li.show1.sea {
background-image: url(images/sea1.png);
} #u1 li.show1.air {
background-image: url(images/air1.png);
} #u1 li.show1.eche {
background-image: url(images/eche1.png);
} #u1 li.show1.express {
background-image: url(images/express1.png);
}

  3

$("#u1 li").click(function () {
$(this).addClass("show1");
})

  

CSS 点击图片替换样式的更多相关文章

  1. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  2. 复选框checkbox——用背景图片替换样式

    input { border : none; display : inline-block; width : 25px; height : 25px; -webkit-apearance : none ...

  3. CSS样式,雪碧,图片替换,渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

  4. 移动Web—CSS为Retina屏幕替换更高质量的图片

    来源:互联网 作者:佚名 时间:12-24 10:37:45 [大 中 小] 点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Re ...

  5. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  6. node.js入门学习(二)MIME模块,request和response对象,demo之不同url请求不同html页面,页面包含图片、样式css等静态资源

    一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...

  7. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  8. CSS——图片替换方法比较

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...

  9. css图片替换方法

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),因为文字才是搜索引擎寻找的主要对象. https://www.cn ...

随机推荐

  1. django+uwsgi+nginx+sqlite3部署+screen

    note:可通过该命令查找文件未知 sudo find / -name filename 一:项目(github) ssh root@server ip         #  连接你的服务器 git ...

  2. ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables option so it cannot exe

    在Mysql集群中创建用户时.出现如下错误! mysql> create user 'testuse'@'localhost' identified by '111111'; ERROR 129 ...

  3. uva-10887-枚举

    题意:集合S1和S2,把S2中的元素拼接到S1的后面去,生成新的元素,问有多少个不重复的元素 直接map.注意,不能用cin读取字符串,题目没有保证字符串中间没有空格 #include "p ...

  4. Java-左移右移-jdk8

    移位有三种 << 左移,左边补0 >> 右移,正数左边补0,负数补1 >>> 右移, 正数,负数统一左边补0 来看几个奇葩的代码 public static ...

  5. ELK学习博客

    ELK实时日志分析平台环境部署--完整记录 https://www.cnblogs.com/kevingrace/p/5919021.html

  6. 如何利用Social Listening从社会化媒体中“提炼”有价值的信息?

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 在本文中,笔者将会介绍大数据分析主要的处对象---社会化媒 ...

  7. 52.纯 CSS 创作一个小球绕着圆环盘旋的动画

    原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...

  8. Mybatis学习4——多对一

    一个用户对多个订单 在用户中添加属性List<user> User.java package pojo; import java.util.Date; import java.util.L ...

  9. 编写优秀Bug报告的艺术及案例分析

    编写优秀Bug报告的艺术及案例分析 ---Rex Black原著<Fine art of writing a good bug report > ---Kiki翻译于2005/5/28 前 ...

  10. poi excel 设置边框字体行高行宽

     final HSSFSheet sheet = wb.createSheet(sheetName + "_" + n);   System.out.println("s ...