2种方法实现CSS LI隔行换色

 　　CSS隔行变色使用率挺高的，今天抽空写了这篇简短的教程，教给CSS不顺手的初级学者两种方法实现CSS的隔行换色功能。大家知道，隔行换色的对象一般是TABle或Li,Table就不说了，个人觉得已经过时了，主要来说下CSS Li的隔行换色，直接放代码吧。

　　第一种方法：

　　这种方法看上去是纯CSS，不过这里使用了expression，等同于半个JavaScript，这种方法简单，不过CSS的expression貌似存在一些兼容性问题，所以这个功能仅用于看重IE的用户。

　　第二种方法：CSS和JS结合：

时间： 2024-08-30 13:57:41

2种方法实现CSS LI隔行换色的相关文章

css expression 隔行换色_经验交流

css实现的,用expression但在实际中部建议使用,占用资源而且firefox浏览器不支持                                                           [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 就两颜色的时候可以改这这样 <style> .db tr{ background-color:expression('#abcdef,#123456'.split(',')[rowIndex%2]); } </styl

js实现li隔行换色的代码

推荐使用javascript实现比较好,没有必要浪费服务器的资源 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

使用简洁的jQuery方法实现隔行换色功能

 本篇文章主要介绍了使用简洁的jQuery方法实现隔行换色功能.需要的朋友可以过来参考下,希望对大家有所帮助 今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:   代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">  <title>隔行换色</title>     <script src="js/jquery-

jQuery方法简洁实现隔行换色及toggleClass的使用_jquery

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo

使用简洁的jQuery方法实现隔行换色功能_jquery

今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>隔行换色</title>    <script src="js/jquery-1.4.2.min.js"></script>    <style type=&

JS+CSS实现Li列表隔行换色效果的方法

 这篇文章主要介绍了JS+CSS实现Li列表隔行换色效果的方法,实例分析了js操作li节点的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

JS+CSS实现Li列表隔行换色效果的方法_javascript技巧

本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh

Excel实现隔行换色的2种方法图文介绍

Excel 2010功能强大,实现隔行换色远比 以前Excel 2003版本简单多了,下面介绍两种隔行换色的方法: 1.使用套用表格格式功能 Excel 2010有一个"套用表格格式"的功能可以实现隔行换色的功能,操作十分方便.只需要选中需要改变格式的区域,选择"开始 -> 套用表格格式"中的样式,即可实现.如图所示. 2. 使用条件格式和函数的功能这个方法无论在Excel 2003或者更高版本的Excel 2010中都可以完美实现,首先选择要改变样式的区域.

实现隔行换色效果的两种方式【实用】_javascript技巧

纯CSS方式实现隔行颜色交替.鼠标经过高亮颜色: <html> <head> <title></title> <style type="text/css"> ul{list-style:none} li:nth-child(odd){background-color:#eee} li:hover{background-color:Yellow} </style> </head> <body>