<!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>
- 浏览: 1550895 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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 828jquery.cookie.js 是一款轻量级的 cooki ... -
【javascript】cookie 基础
2015-03-30 11:58 626一、什么是 cookie?cookie 就是页面用来保存信息 ... -
Javascript跨域访问解决方案
2014-02-25 09:25 832由于安全方面的考虑,Javascript被限制了跨域访 ... -
优雅绝妙的Javascript跨域问题解决方案
2014-02-25 09:25 758在今年的baidu salon分享会上黄方荣主讲的《WEB ... -
基于jQuery,实现JS面向对象编程
2014-02-10 15:15 1169//接口1var IClassName = { ... -
jQuery用面向对象的思想来编写验证表单的插件
2014-02-10 15:12 817本人的重点是怎么构建一个简单有效可扩展的jQuery表 ... -
JS面向对象教程
2014-02-10 14:15 595Javascript是一个类C的语言,他的面向对象的东西相对 ... -
jquery的几个CDN加速点
2014-01-22 10:17 1008query的几个CDN加速点 谷歌jquery cdn加 ... -
网络爬虫读取js生成的页面
2014-01-15 10:41 1650还有js逻辑的页面,对网络爬虫的信息抓取工作造成了很大障碍。 ... -
Javascript闭包
2014-01-01 18:00 746闭包(closure)是Javascript语言的一个难点 ... -
Javascript 面向对象编程
2013-12-16 09:54 741avascript是一个类C的语言,他的面向对象的东西相对 ... -
Jcrop是一个功能强大的图像裁剪引擎
2013-12-13 10:45 1382Jcrop是一个功能强大的图像裁剪引擎jQuery的。 ... -
12 款优秀的 JavaScript MVC 框架评估
2013-11-25 09:40 855在最近的几个月中,作者(Gordon L.Hempton) ... -
启用lazyload插件,减少图片加载
2013-11-13 10:32 867https://github.com/tuupola/jq ... -
scrollWidth,clientWidth等区别
2013-10-02 11:28 806scrollWidth:是对象的实 ... -
八款Js框架介绍及比较
2013-09-29 09:05 770目前来看,JS框架以及 ... -
b-s开发中经常用到的javaScript技术
2013-09-28 10:39 1006程序代码: 一、验证类 1、数字验证内 1.1 整数 1. ... -
使用JS让链接从新窗口打开
2013-09-25 08:56 738当网页内出现很多链接,且链接需要在新窗口打开时。使用程 ... -
Javascript模板引擎
2013-09-25 08:56 787模板引擎的主要功能就是把变化的数据融入到不变的模板中, ... -
网页文本替换技术
2013-09-20 21:32 843做网站设计的时候,常常会遇到想在页面上显示某一字体,但 ...
相关推荐
css+js隔行换色,很实用的代码。喜欢 的快来用吧,新手赚积分拉~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS结合JavaScript 实现Li隔行换色 代码
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
CSS2+JS实现table隔行变色,简单易懂,拿来改改就可以用
很经典的js特效,上传供大家学习,希望对你们做项目的时候有所帮助。
这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束。 运行效果如下图所示: 具体代码如下: <!DOCTYPE ...
CSS+JS 实现表格隔行变色 鼠标移动变色
主要介绍了使用JavaScript和CSS实现文本隔行换色的方法,当然最普通的也可以单纯用CSS实现,需要的朋友可以参考下
通过点击实现展开闭合效果 <style type="text/css"> ...隔行更换背景色 <style type="text/css"> .one{background-color:#33ffcc;} .two{background-color:#ffff66;} .over{background-color:#ccff66;} ······
使用css实现隔行换色的方法,需要的朋友可以参考一下
综合jquery实现表格隔行换色和鼠标经过提示效果源码 7)日历插件 1.jQuery简洁漂亮点阵数字时钟显示日期的插件 2.一款简单jQuery日历选择器代码 3.基于jquery实现倒计时钟插件下载,Flip-Down Clock特效效果 ...
js代码: css代码: 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.2 JavaScript语法基础 13.3 实例一:输入时高亮显示的Excel表格 13.4 实例二:由远到近的文字 13.5 实例三:跑马灯特效 13.6...
本文主要介绍了实现隔行颜色交替 鼠标经过高亮颜色的两种方式的具体实例,有助于理解和使用。方案一:纯CSS编写;方案二:js代码编写。需要的朋友可以参考下
JS代码 JS网页内容模块选用 Photoshop 扩展动作 TAB带动画 隔行同色 层固定在右下角的离奇方法 超简单表格隔行换色+鼠标经过变色 打开关闭层JS 弹出菜单 顶部自动收缩滑动门广告代码 动画效果打开层 关闭层 固定位置...
今天把项目生成好后,发布到万维网上进行测试,发现table的隔行换色在IE8,chorem中不能正常显示。找了许多资料,CSS看样是不能解决,只能用JS来控制了
如下所示: <html> <head> <meta charset=utf-8> <title>无标题文档</title> <style type=text/css> li { list-style-type: none;...script type=text/javascript
废话不多说了,直接给大家贴代码了,具体代码如下所示: <%@ page language=java import=java.util.* pageEncoding=UTF-8%> .../resources/css/bootstrap.min.css> </head> <body> <tabl