零古网
您的百科小助手
首页
教程
游戏
电脑
历史
首页
教程
正文
CSS expression 隔行换色效果
教程
2023-10-29 10:44:45
方法一是用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打造很Web2.0的按钮
下一篇 »
推荐文章
tp link无线路由器无法登录192.168.1.1怎么办?(tp link无线路由器无法登录192.168.1.1怎么办?)
巧妙插入图片,让WPS演示文字背后更精彩
wps格式刷怎么连续用?
wps word表格线条粗细怎么设置 wps Word设置表格线条粗细的方法
泰拉瑞亚电脑版怎么下载?
阅读排行
阿里视频网址是什么 TBO视频网站上线时间
2023-10-24
电脑通过IIS访问svc出错无法提供网页怎么解决?
2023-10-24
WPS PPT文本框输入文字如何自动换行 WPS PPT文本框输入文字自动换行的设置方法
2023-10-20
y480怎么u盘重装系统 y480装win7
2023-11-27
WPS中Excel怎么计算数据的算术平方根
2023-11-24
怎么删除无用的注册表 怎么删除不用的注册表
2023-12-02
剪映怎么单独导出音频 电脑版剪映导出音频的方法
2023-10-14
为什么输入192.168.1.1显示的是移动(输入192.168.1.1出现中国电信)
2023-12-04
车载U盘怎么恢复 车载u盘吧
2023-12-06
?Word图片居中后仍然偏右怎么办 Word文档让图片居中时在正中间的方法教程
2023-10-16