首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS expression 隔行换色效果
所属分类：
网页制作
/
CSS
阅读数： 400
收藏 0
赞 0
分享
方法一是用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 属性 MASK详解
这篇文章主要介绍了奇妙的 CSS 属性 MASK，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
css3实现小箭头各种图形效果
这篇文章主要介绍了css3实现小箭头各种图形效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS让子容器超出父元素(子容器悬浮在父容器效果)
这篇文章主要介绍了CSS让子容器超出父元素(子容器悬浮在父容器效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
div自适应高度自动填充剩余高度
这篇文章主要介绍了div自适应高度自动填充剩余高度,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
css实现图片自适应容器的几种方式(小结)
这篇文章主要介绍了css实现图片自适应容器的几种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
评论 0
收藏 0
赞 0
分享
CSS 实现 10 种现代布局的代码
这篇文章主要介绍了CSS 实现 10 种现代布局的代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码
这篇文章主要介绍了CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS届的绘图板CSS Paint API简介
这篇文章主要介绍了CSS届的绘图板CSS Paint API简介,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
使用 CSS Paint API 动态创建与分辨率无关的可变背景效果
这篇文章主要介绍了使用 CSS Paint API 动态创建与分辨率无关的可变背景效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
在CSS网格布局中的列中填充项目的实现方法
这篇文章主要介绍了在CSS网格布局中的列中填充项目的实现方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
怎么用互联网思维的做餐饮？
google
百度联盟点击率低的原因
Google
什么样的网站赚钱 怎么赚钱？
谷歌广告怎么收款？光大银行需要携带资料到柜台办理
站长故事
更多
iPhone创造了黄牛 还是黄牛捧红了iPhone？
作为站长的你是否已有危机感：你被盯上了
站长们,就别在折腾你的用户了
我是怎么赚到人生的第一个百万的
华人首富李嘉诚投资互联网的故事
做好网站维护 持续吸引用户浏览
