AutoCAD
3DMAX
C语言
Pro/E
UG
JAVA编程
PHP编程
Maya动画
Matlab应用
Android
Photoshop
Word
Excel
flash
VB编程
VC编程
Coreldraw
SolidWorks
A Designer
Unity3D
AE教程
Delphi
C++
汇编语言
数据结构
软件工程
ASP编程
JSP
JavaScript
XML
SQL Server
ACCESS
MySQL
速读教程
IQ智商
记忆力
口才教程
学习方法
软件工程
ASP编程
JSP
JavaScript
XML
html游戏
ACCESS
MySQL
首页
>
css教程
CSS expression 隔行换色效果
51自学网
http://www.wanshiok.com
CSS,隔行换色方法一是用CSS控制每一行的LI属性，如
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="one"></li>
<li class="two"></li>
</ul>
然后在CSS文件里定义class属性就可以了。但是假如调用在程序里就不是很合适。所以考虑可以使用以下的代码控制。
<style type="text/css"> UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8'); } </style> <ul class="myul1"> <li id="li2">111</li> <li id="li2">222</li> <li id="li2">333</li> <li id="li2">444</li> <li id="li2">555</li> <li id="li2">666</li> </ul>
提示：您可以先修改部分代码再运行
还有一种通过JS代码控制
<style type="text/css"> <!-- .li01 { background:#FFF; } .li02 { background:#000; } li a{width:100%;display:block;} li a:hover{background:red;} --> </style> <div id="list01"><ul> <li class="title"><a href="#">title</a></li> <li><a href="#">111</a></li> <li><a href="#">222</a></li> <li><a href="#">333</a></li> <li><a href="#">444</a></li> <li><a href="#">555</a></li> <li><a href="#">666</a></li> </ul></div> <script Language="Javascript1.2"> objName=document.getElementById("list01").getElementsByTagName("li") for (i=0;i<objName.length;i++) { (i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02"); } </script>
提示：您可以先修改部分代码再运行
最上面的一种适合固定行数的。下面的适合未知行数，比如程序调用。
CSS,隔行换色
CSS两列布局实现方式总结
网站设计之合理架构CSS
CSS的三列式"圣杯布局"方案完全解析
CSS Web安全字体组合详解
css水平居中的各种方法总结(推荐)
CSS使用BFC规则布局引发外层div包裹内层div的处理方法
CSS在固定宽高的div内实现垂直居中的实例详解
浅谈CSS中的clear清除浮动
浅析css3中matrix函数的使用
使用CSS3中的calc()属性来以算式表达尺寸数值
上一篇：
CSS 制作有弹性的日历表
下一篇：
运用比较纯的CSS打造很Web2.0的按钮
分享到：
QQ空间
新浪微博
腾讯微博
人人网
网易微博
CAD教程
教师招聘
招聘信息
51自学网 我要自学网视频教程,视频下载 自学网 自学编程网 CAD自学网 PS自学网 www.wanshiok.com
网站地图
