首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS expression 隔行换色效果
所属分类：
网页制作
/
CSS
阅读数： 437
收藏 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>
提示：您可以先修改部分代码再运行
最上面的一种适合固定行数的。下面的适合未知行数，比如程序调用。
更多精彩内容
其他人还在看
CSS3实现背景透明文字不透明的示例代码
这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
浅谈CSS中的尺寸单位
这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。感兴趣的小伙伴们可以参考一下
评论 0
收藏 0
赞 0
分享
CSS中有些属性的前面会加上“*”或“_”所代表的意思
这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS 设置滚动条样式的实例代码
这篇文章主要介绍了CSS 设置滚动条样式的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
这篇文章主要介绍了纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
纯css实现多级折叠菜单折叠树效果
这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果，运用checkbox的checked值来判断下级栏目是否展开，通过css3选择器提供的checked伪类来实现此效果，感兴趣的朋友参考下吧
评论 0
收藏 0
赞 0
分享
CSS Grid 网格布局全解析
这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
css flex 弹性布局详解
这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
CSS3 二级导航菜单的制作的示例
这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
使用css禁用input、checkbox、select等html控件实现disable效果
这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
调查：55.2%受访用户不会相信朋友圈打广告的化妆品
怎样利用网络赚钱 网络赚钱有哪些方法
一个既能省钱又能赚钱的公众号 你要错过么
未来5大网络销售模式选哪种好？
图文讲解信用卡验证激活国际版PayPal账号的教程
为什么做网站不赚钱?做网站不赚钱的三大原因
站长故事
更多
站长经验 草根站长成为自媒体明星的过程与经验
有钱就是任性 2014年科技界大佬十大惊人语录
作为站长的你是否已有危机感：你被盯上了
一个日IP2000的网站，我赚了20万
职场中12种经典实用的管理方法和工具
浅析将两个月的新站做到权重4的方案
