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. angularjs数据交互

    异步问题ajax异步请求数据完数据后给$scope赋值的时候需要检查$scope的数据更新没有.要不然无法绑定数据. <!DOCTYPE html> <html ng-app=&qu ...

  2. RPC通信原理

    什么是 RPCRPC(Remote Procedure Call Protocol)远程过程调用协议.通俗的描述是:客户端在不知道调用细节的情况下,调用存在于远程计算上的某个过程或函数,就像调用本地应 ...

  3. Mysql5.7 Linux安装教程

    1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...

  4. html调用html的方法

    html调用html的方法 html中引入调用另一个html的方法,尝试了好几种,都列出来: 其中第一种是最好的,其他的方法,可以尝试看看,是不是适合你当前项目 一.div+$(“#page1”).l ...

  5. Python开发【模块】:Celery 分布式异步消息任务队列

    Celery 前言: Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery, 举几个 ...

  6. python中的clear

    1 a = { 2 "name":"dlrb", 3 "age":25, 4 "height":168 5 } 6 a. ...

  7. 微信支付开发出现redirect_uri参数错误的解决方法

    我们在进行微信支付开发的时候会遇到出现“redirect_uri参数错误”这种情况,怎么办呢?下面就是我总结出现这种“redirect_uri参数错误”的七种可能情况,以及解决方式. 1.可能原因①: ...

  8. nslookup和dig命令

    nslookup与dig两个工具功能类似,都可以查询制定域名所对应的ip地址,所不同的是dig工具可以从该域名的官方dns服务器上查询到精确的权威解答,而nslookup只会得到DNS解析服务器保存在 ...

  9. djangobb之forum.topics

    看djangobb源代码时,看到view的show_forum(request, forum_id, full=True)时,对于topics = forum.topics.order_by('-st ...

  10. kubernetes国内镜像拉取

    因国内访问不到goole服务器,只能拉取国内的镜像,这里以阿里云为例. 安装minikube时报failed to pull image "k8s.gcr.io/kube-apiserver ...