网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
CSS expression 隔行换色效果
(编辑:jimmy 日期: 2024/9/21 浏览:
2
)
方法一是用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的按钮
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
最新资源
《命运2》新枪涉嫌抄袭Bungie响应正在调查
《刺客信条:影》引发争议日本预购表现低迷
黑神话悟空上品狸侍长精魄获取方法一览|上品狸侍
大自然环保音乐系列《风花雪月》4CD/DTS[WAV分轨
模拟之声慢刻CD甄妮《86精选[日本母带]》[低速原
[ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速
任天堂今晚举行直面会!第三方及独立游戏展示
《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A
任天堂公布《塞尔达传说》系列时间线:野炊与王泪
五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
首页
音乐
电影
资源