<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接背景色隔行显示</title>
</head>
<style>
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;}
.mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}
.mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */
.mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */
.mytable ul li.t3 {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new.gif) #D2FCA0 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}/* 鼠标经过时的背景色 */
</style>
<body>
<div id=tab>
<ul>
<li><a href="#">这个是第1行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第2行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第3行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第4行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第5行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第6行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第7行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第8行的文字,大家看清楚了</a></li>
<li><a href="#">这个是第9行的文字,大家看清楚了</a></li>
</ul></div><script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("li");
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
//-->
</script>
</body>
</html>
- 浏览: 1598638 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1585)
- Http Web (18)
- Java (194)
- 操作系统 (2)
- 算法 (30)
- 计算机 (45)
- 程序 (2)
- 性能 (50)
- php (45)
- 测试 (12)
- 服务器 (14)
- Linux (42)
- 数据库 (14)
- 管理 (9)
- 网络 (3)
- 架构 (83)
- 安全 (2)
- 数据挖掘 (16)
- 分析 (9)
- 数据结构 (2)
- 互联网 (6)
- 网络安全 (1)
- 框架 (9)
- 视频 (2)
- 计算机,SEO (3)
- 搜索引擎 (31)
- SEO (18)
- UML (1)
- 工具使用 (2)
- Maven (41)
- 其他 (7)
- 面向对象 (5)
- 反射 (1)
- 设计模式 (6)
- 内存数据库 (2)
- NoSql (9)
- 缓存 (7)
- shell (9)
- IQ (1)
- 源码 (1)
- Js (23)
- HttpClient (2)
- excel (1)
- Spring (7)
- 调试 (4)
- mysql (18)
- Ajax (3)
- JQuery (9)
- Comet (1)
- 英文 (1)
- C# (1)
- HTML5 (3)
- Socket (2)
- 养生 (1)
- 原理 (2)
- 倒排索引 (4)
- 海量数据处理 (1)
- C (2)
- Git (59)
- SQL (3)
- LAMP (1)
- 优化 (2)
- Mongodb (20)
- JMS (1)
- Json (15)
- 定位 (2)
- Google地图 (1)
- memcached (10)
- 压测 (4)
- php.性能优化 (1)
- 励志 (1)
- Python (7)
- 排序 (3)
- 数学 (3)
- 投票算法 (2)
- 学习 (1)
- 跨站攻击 (1)
- 前端 (8)
- SuperFish (1)
- CSS (2)
- 评论挖掘分析 (1)
- Google (13)
- 关键词分析 (1)
- 地图 (1)
- Gzip (1)
- 压缩 (1)
- 爬虫 (13)
- 流量统计 (1)
- 采集 (1)
- 日志分析 (2)
- 浏览器兼容 (1)
- 图片搜索引擎技术 (2)
- 空间 (1)
- 用户体验 (7)
- 免费空间 (1)
- 社交 (2)
- 图片处理 (2)
- 前端工具 (1)
- 商业 (3)
- 淘宝 (3)
- 站内搜索 (1)
- 网站收藏 (1)
- 理论 (1)
- 数据仓库 (2)
- 抓包 (1)
- Hadoop (105)
- 大数据 (6)
- Lucene (34)
- Solr (31)
- Drupal (1)
- 集群 (2)
- Lu (2)
- Mac (4)
- 索引 (9)
- Session共享 (1)
- sorl (10)
- JVM (9)
- 编码 (1)
- taobao (14)
- TCP/IP (4)
- 你可能會感興趣 (3)
- 幽默笑话 (7)
- 服务器整合 (1)
- Nginx (9)
- SorlCloud (4)
- 分佈式搜索 (1)
- ElasticSearch (30)
- 網絡安全 (1)
- MapReduce (8)
- 相似度 (1)
- 數學 (1)
- Session (3)
- 依賴注入 (11)
- Nutch (8)
- 云计算 (6)
- 虚拟化 (3)
- 财务自由 (1)
- 开源 (23)
- Guice (1)
- 推荐系统 (2)
- 人工智能 (1)
- 环境 (2)
- Ucenter (1)
- Memcached-session-manager (1)
- Storm (54)
- wine (1)
- Ubuntu (23)
- Hbase (44)
- Google App Engine (1)
- 短信 (2)
- 矩阵 (1)
- MetaQ (34)
- GitHub &Git &私/公有库 (8)
- Zookeeper (28)
- Exception (24)
- 商务 (1)
- drcp (1)
- 加密&解密 (1)
- 代码自动生成 (1)
- rapid-framework (1)
- 二次开发 (1)
- Facebook (3)
- EhCache (1)
- OceanBase (1)
- Netlog (1)
- 大数据量 (2)
- 分布式 (3)
- 事物 (2)
- 事务 (2)
- JPA (2)
- 通讯 (1)
- math (1)
- Setting.xml (3)
- 络驱动器 (1)
- 挂载 (1)
- 代理 (0)
- 日本語の (1)
- 花生壳 (7)
- Windows (1)
- AWS (2)
- RPC (11)
- jar (2)
- 金融 (1)
- MongDB (2)
- Cygwin (1)
- Distribute (1)
- Cache (1)
- Gora (1)
- Spark (31)
- 内存计算 (1)
- Pig (2)
- Hive (21)
- Mahout (17)
- 机器学习 (34)
- Sqoop (1)
- ssh (1)
- Jstack (2)
- Business (1)
- MapReduce.Hadoop (1)
- monitor (1)
- Vi (1)
- 高并发 (6)
- 海量数据 (2)
- Yslow (4)
- Slf4j (1)
- Log4j (1)
- Unix (3)
- twitter (2)
- yotube (0)
- Map-Reduce (2)
- Streaming (1)
- VMware (1)
- 物联网 (1)
- YUI (1)
- LazyLoad (1)
- RocketMQ (17)
- WiKi (1)
- MQ (1)
- RabbitMQ (2)
- kafka (3)
- SSO (8)
- 单点登录 (2)
- Hash (4)
- Redis (20)
- Memcache (2)
- Jmeter (1)
- Tsung (1)
- ZeroMQ (1)
- 通信 (7)
- 开源日志分析 (1)
- HDFS (1)
- zero-copy (1)
- Zero Copy (1)
- Weka (1)
- I/O (1)
- NIO (13)
- 锁 (3)
- 创业 (11)
- 线程池 (1)
- 投资 (3)
- 池化技术 (4)
- 集合 (1)
- Mina (1)
- JSMVC (1)
- Powerdesigner (1)
- thrift (6)
- 性能,架构 (0)
- Web (3)
- Enum (1)
- Spring MVC (15)
- 拦截器 (1)
- Web前端 (1)
- 多线程 (1)
- Jetty (1)
- emacs (1)
- Cookie (2)
- 工具 (1)
- 分布式消息队列 (1)
- 项目管理 (2)
- github (21)
- 网盘 (1)
- 仓库 (3)
- Dropbox (2)
- Tsar (1)
- 监控 (3)
- Argo (2)
- Atmosphere (1)
- WebSocket (5)
- Node.js (6)
- Kraken (1)
- Cassandra (3)
- Voldemort (1)
- VoltDB (2)
- Netflix (2)
- Hystrix (1)
- 心理 (1)
- 用户分析 (1)
- 用户行为分析 (1)
- JFinal (1)
- J2EE (1)
- Lua (2)
- Velocity (1)
- Tomcat (3)
- 负载均衡 (1)
- Rest (2)
- SerfJ (1)
- Rest.li (1)
- KrakenJS (1)
- Web框架 (1)
- Jsp (2)
- 布局 (2)
- NowJs (1)
- WebSoket (1)
- MRUnit (1)
- CouchDB (1)
- Hiibari (1)
- Tiger (1)
- Ebot (1)
- 分布式爬虫 (1)
- Sphinx (1)
- Luke (1)
- Solandra (1)
- 搜素引擎 (1)
- mysqlcft (1)
- IndexTank (1)
- Erlang (1)
- BeansDB (3)
- Bitcask (2)
- Riak (2)
- Bitbucket (4)
- Bitbuket (1)
- Tokyo Cabinet (2)
- TokyoCabinet (2)
- Tokyokyrant (1)
- Tokyo Tyrant (1)
- Memcached协议 (1)
- Jcrop (1)
- Thead (1)
- 详设 (1)
- 问答 (2)
- ROM (1)
- 计算 (1)
- epoll (2)
- libevent (1)
- BTrace (3)
- cpu (2)
- mem (1)
- Java模板引擎 (1)
- 有趣 (1)
- Htools (1)
- linu (1)
- node (3)
- 虚拟主机 (1)
- 闭包 (1)
- 线程 (1)
- 阻塞 (1)
- LMAX (2)
- Jdon (1)
- 乐观锁 (1)
- Disruptor (9)
- 并发 (6)
- 为共享 (1)
- volatile (1)
- 伪共享 (1)
- Ringbuffer (5)
- i18n (2)
- rsync (1)
- 部署 (1)
- 压力测试 (1)
- ORM (2)
- N+1 (1)
- Http (1)
- web开发脚手架 (1)
- Mybatis (1)
- 国际化 (2)
- Spring data (1)
- R (4)
- 网络爬虫 (1)
- 条形码 (1)
- 等比例缩放 (1)
- java,面向接口 (1)
- 编程规范 (1)
- CAP (1)
- 论文 (1)
- 大数据处理 (1)
- Controller (3)
- CDN (2)
- 程序员 (1)
- Spring Boot (3)
- sar (1)
- 博弈论 (1)
- 经济 (1)
- Scrapy (1)
- Twistedm (1)
- cron (1)
- quartz (1)
- Debug (1)
- AVO (1)
- 跨语言 (1)
- 中间服务 (2)
- Dubbo (4)
- Yarn (1)
- Spring OSGI (1)
- bundle (1)
- OSGI (1)
- Spring-Boot (1)
- CA证书 (1)
- SSL (1)
- CAS (7)
- FusionCharts (5)
- 存储过程 (3)
- 日志 (2)
- OOP (2)
- CentOS (5)
- JSONP (2)
- 跨域 (5)
- P3P (1)
- Java Cas (1)
- CentOS 6.5 Released – Installation Guide with Screenshots (1)
- Android (1)
- 队列 (2)
- Multitail (1)
- Maout (1)
- nohup (1)
- AOP (1)
- 长连接 (3)
- 轮循 (2)
- 聊天室 (1)
- Zeus (1)
- LSM-Tree (1)
- Slope One (1)
- 协同过滤 (1)
- 服务中间件 (1)
- KeyMeans (1)
- Bitmap (1)
- 实时统计 (1)
- B-Tree+ (1)
- PageRank (1)
- 性能分析 (1)
- 性能测试 (1)
- CDH (10)
- 迭代计算 (1)
- Jubatus (1)
- Hadoop家族 (8)
- Cloudera (2)
- RHadoop (1)
- 广告定价 (1)
- 广告系统 (9)
- 广告系统,架构 (1)
- Tag推荐算法 (1)
- 相似度算法 (1)
- 页面重构 (2)
- 高性能 (6)
- Maven3 (3)
- Gradle (11)
- Apache (1)
- Java并发 (1)
- Java多进程 (1)
- Rails (1)
- Ruby (3)
- 系统架构 (1)
- 运维 (36)
- 网页设计 (1)
- TFS (0)
- 推荐引擎 (0)
- Tag提取算法 (1)
- 概率统计 (1)
- 自然语言处理 (2)
- 分词 (1)
- Ruby.Python (1)
- 语义相似度 (0)
- Chukwa (0)
- 日志收集系统 (0)
- Data Mining (4)
- 开放Api (1)
- Scala (28)
- Ganglia (2)
- mmap (1)
- 贝叶斯分类 (1)
- 运营 (1)
- Mdrill (1)
- Lambda (2)
- Netty (5)
- Java8 (1)
- Solr4 (1)
- Akka (12)
- 计算广告 (2)
- 聊天系统 (1)
- 服务发现 (1)
- 统计指标 (1)
- NLP (1)
- 深度学习 (0)
最新评论
-
wahahachuang5:
web实时推送技术使用越来越广泛,但是自己开发又太麻烦了,我觉 ...
使用 HTML5 WebSocket 构建实时 Web 应用 -
秦时明月黑:
Jetty 服务器架构分析 -
chenghaitao111111:
楼主什么时候把gecko源码分析一下呢,期待
MetaQ技术内幕——源码分析(转) -
qqggcc:
为什么还要写代码啊,如果能做到不写代码就把功能实现就好了
快速构建--Spring-Boot (quote) -
yongdi2:
好厉害!求打包代码
Hadoop日志文件分析系统
发表评论
-
【jquery】jquery.cookie.js 的使用指南
2015-03-30 12:00 864jquery.cookie.js 是一款轻量级的 cooki ... -
【javascript】cookie 基础
2015-03-30 11:58 661一、什么是 cookie?cookie 就是页面用来保存信息 ... -
Javascript跨域访问解决方案
2014-02-25 09:25 855由于安全方面的考虑,Javascript被限制了跨域访 ... -
优雅绝妙的Javascript跨域问题解决方案
2014-02-25 09:25 782在今年的baidu salon分享会上黄方荣主讲的《WEB ... -
基于jQuery,实现JS面向对象编程
2014-02-10 15:15 1192//接口1var IClassName = { ... -
jQuery用面向对象的思想来编写验证表单的插件
2014-02-10 15:12 840本人的重点是怎么构建一个简单有效可扩展的jQuery表 ... -
JS面向对象教程
2014-02-10 14:15 623Javascript是一个类C的语言,他的面向对象的东西相对 ... -
jquery的几个CDN加速点
2014-01-22 10:17 1042query的几个CDN加速点 谷歌jquery cdn加 ... -
网络爬虫读取js生成的页面
2014-01-15 10:41 1677还有js逻辑的页面,对网络爬虫的信息抓取工作造成了很大障碍。 ... -
Javascript闭包
2014-01-01 18:00 777闭包(closure)是Javascript语言的一个难点 ... -
Javascript 面向对象编程
2013-12-16 09:54 763avascript是一个类C的语言,他的面向对象的东西相对 ... -
Jcrop是一个功能强大的图像裁剪引擎
2013-12-13 10:45 1416Jcrop是一个功能强大的图像裁剪引擎jQuery的。 ... -
12 款优秀的 JavaScript MVC 框架评估
2013-11-25 09:40 882在最近的几个月中,作者(Gordon L.Hempton) ... -
启用lazyload插件,减少图片加载
2013-11-13 10:32 904https://github.com/tuupola/jq ... -
scrollWidth,clientWidth等区别
2013-10-02 11:28 846scrollWidth:是对象的实 ... -
八款Js框架介绍及比较
2013-09-29 09:05 799目前来看,JS框架以及 ... -
b-s开发中经常用到的javaScript技术
2013-09-28 10:39 1036程序代码: 一、验证类 1、数字验证内 1.1 整数 1. ... -
使用JS让链接从新窗口打开
2013-09-25 08:56 763当网页内出现很多链接,且链接需要在新窗口打开时。使用程 ... -
Javascript模板引擎
2013-09-25 08:56 812模板引擎的主要功能就是把变化的数据融入到不变的模板中, ... -
网页文本替换技术
2013-09-20 21:32 867做网站设计的时候,常常会遇到想在页面上显示某一字体,但 ...
相关推荐
下面我们将详细讲解如何利用CSS和JS来实现隔行换色。 首先,我们从CSS开始。CSS是网页样式的核心,它允许我们定义元素的外观和布局。要实现隔行换色,我们可以使用`nth-child`伪类选择器。这个选择器允许我们选择...
### CSS结合JavaScript 实现Li隔行换色代码详解 #### 一、背景介绍 在网页设计与开发过程中,为了提高用户体验以及美观性,开发者经常需要对列表项进行样式处理,如实现列表项的隔行变色功能。这种功能不仅能够使...
此外,还可以使用CSS3的`:nth-child()`选择器来简化代码,直接在CSS中实现隔行换色,而不需要依赖jQuery: ```css table tbody tr:nth-child(2n) { background-color: #f5f5f5; } table tbody tr:nth-child(2n+1)...
在实现隔行换色特效时,jQuery的简洁语法使得代码更易读、更易维护。下面将详细介绍实现这一特效的步骤和相关知识点。 首先,确保在项目中引入jQuery库。这通常通过在HTML文件中添加CDN链接或者本地引入jQuery.js...
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
这个主题“JavaScript隔行换色”就是关于如何使用JavaScript来实现这个功能的。 隔行换色通常应用于HTML表格中,通过CSS样式进行基础设置,然后使用JavaScript来动态改变行的样式。以下是一个详细的步骤和知识点...
在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...
本示例"实现表格隔行换色效果"主要涉及JavaScript(JS)编程和HTML表格元素的使用,旨在通过JS特效提升用户体验。下面将详细解释如何利用JavaScript实现这一功能。 首先,我们需要理解HTML表格的基本结构。`<table>...
在网页设计中,为了提升...综上所述,通过CSS和JavaScript的结合,我们可以轻松实现table隔行变色的效果,无论是静态页面还是动态内容,都能提供良好的阅读体验。在实际开发中,可以根据项目需求灵活选择合适的方法。
本教程将详细介绍如何使用`jQuery`实现隔行换色的特效,并通过两个实例帮助你理解和应用。 首先,我们需要理解基本的HTML结构,例如一个包含多行数据的表格。假设我们有以下HTML代码: ```html 数据1 数据2 ...
在IT领域,网页开发是不可或缺的一部分,而"codeAjax选项卡、隔行换色、弹出层"这三个概念都是网页动态交互设计中的重要元素。让我们分别深入探讨它们的原理和应用。 首先,codeAjax选项卡是一种常见的用户界面设计...
1. CSS基础:在不使用jQuery的情况下,我们通常会通过CSS的`:nth-child()`选择器来实现隔行换色。例如,给偶数行添加背景色: ```css tr:nth-child(even) { background-color: #f2f2f2; } ``` 2. jQuery实现:...
接着,CSS用于实现隔行换色的效果。这里,我们可以使用伪类选择器`nth-child(odd)`和`nth-child(even)`来分别选择奇数行和偶数行,并赋予不同的背景颜色: ```css table tr.even { background-color: #f2f2f2; } ...
总结来说,实现JavaScript表单隔行换色的核心在于使用DOM操作获取并遍历表格行,根据行的索引判断是否为偶数,然后动态添加CSS类来改变背景色。这种技术不仅可以提升用户对大量数据的阅读体验,也是JavaScript在网页...
下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能,并兼容IE6、IE7以及Firefox。 首先,让我们从隔行换色开始。这是一种常见的CSS技巧,可以通过使用CSS伪类`:nth-child()`来实现。这个选择...
隔行换色通常使用CSS(层叠样式表)来完成,通过设置不同的背景颜色或者使用渐变色,使表格的偶数行与奇数行呈现出不同的视觉效果。在CSS中,我们可以利用`nth-child`选择器来实现这个功能。例如: ```css tr:...
总结起来,结合CSS2和JavaScript可以轻松地为表格实现隔行变色的效果。在CSS中,我们利用`:nth-child()`伪类选择器或者自定义类来定义行的样式;在JavaScript中,我们通过DOM操作动态地添加或移除这些样式类,确保...
CSS2实现的隔行换色 CSS2实现的隔行换色是使用CSS2的相邻选择符来实现的,该技术可以实现表格的隔行换色效果。该技术的优点是无需使用JavaScript脚本和class样式,只需使用CSS代码即可实现该效果。 首先,我们需要...
标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...