首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS expression 隔行换色效果
所属分类：
网页制作
/
CSS
阅读数： 323
收藏 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伪类对象before和after的用法实例详解
这两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
评论 0
收藏 0
赞 0
分享
CSS3 实用技巧：实现黑白图像效果示例代码
本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码，感兴趣的朋友可以看下截图，希望对大家有所帮助
评论 0
收藏 0
赞 0
分享
IE.JS解决IE兼容性问题方法汇总
正如标题所言它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示，下面为大家介绍下具体针对不同浏览器的调用方法，感兴趣的朋友可以参考下哈
评论 0
收藏 0
赞 0
分享
实现CSS3中的border-radius(边框圆角)示例代码
本文为大家详细介绍下如何实现CSS3中的border-radius(圆角)，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
评论 0
收藏 0
赞 0
分享
CSS line-height行高上下居中垂直居中样式属性
我们在css编写中需要对大篇幅的内容显示的更好看，有些间隔，不要在挤在一起难看，就可以使用Line-Height属性进行控制
评论 0
收藏 0
赞 0
分享
CSS Float布局过程与老生常谈的三栏布局
这篇文章就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局
评论 0
收藏 0
赞 0
分享
邮箱css加载失败怎么办 网站css加载异常原因分析
造成css加载失败的原因有很多，脚本之家也遇到过，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
评论 0
收藏 0
赞 0
分享
CSS控制样式的三种方式(优先级对比验证)
大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式
评论 0
收藏 0
赞 0
分享
meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染
X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=
评论 0
收藏 0
赞 0
分享
Discuz7.2 IE9兼容性写法 杜工完全修补方案
因为Discuz7.2在IE9浏览器中有一系列的问题，所有要在以后的开发中考虑到ie9浏览器的一些问题了，这里简单介绍下，需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
揭秘朋友圈面膜：足不出户 国内生产俩月造出国际大牌
朋友圈疯传的万能Wi-Fi账号是假的 犯了常识性错误
Google
如何适当提高垃圾站Google
贴吧引流变现，高调创收！
图文讲解信用卡验证激活国际版PayPal账号的教程
站长故事
更多
从地图到苹果6！盘点苹果产品的四大败笔
一个年入80W的96年草根站长
浅析网站运营失败：你除了报怨还学会了什么
那些跟马化腾一起创业的亿万富翁们
人物：戴志康，80后创业者携惊叹号而来
一个新手站长的几年seo外链过程
