CSS中如何实现网页隔行换色

　　隔行换色不仅可以利于阅读而且也显得美观，这种手法一般被设计师们作为自己的工具刀，那么你知道在css中如何实现隔行换色吗？

　　一、background背景图片

　　如果行高固定的话，推荐使用背景图，也推荐将行高固定!兼容一切浏览器。

　　二、CSSExpression

　　文字：color:expression(this.sourceIndex%2?'#ff0000':'#000000');

　　背景：background-color:expression(this.sourceIndex%2?'#ff0000':'#000000');

　　注意：本方法浏览器兼容度不够，不支持FF3。

　　三、class分别定义

　　

?

　　...

　　

• ...

  ?

  　　...

  　　

• ...

  ?

  　　

?

　　实实在在的写法。

　　四、通过JS看实例

　　运行代码框

　　

　　

　　

　　

　　

　　

　　

　　function bgChange(){

　　if(!document.getElementsByTagName) return false;

　　var tables = document.getElementsByTagName("table");

　　for(var i=0; i

　　var odd = false;

　　trs = tables[i].getElementsByTagName("tr");

　　for(var j=0; j

　　if(odd==true){

　　trs[j].style.background = "#ccc";

　　odd = false;

　　}else{

　　odd = true;

　　}

　　}

　　}

　　}

　　window.onload = bgChange;

　　

　　

　　

?

　　

?

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

?

　　

测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字
测试文字	测试文字	测试文字

?

　　

　　//

　　if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="Run in 184 ms, 9 Queries.";

　　//]]>

　　

　　

　　[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]

　　以上就是css中如何实现隔行换色的内容，更多相关内容请继续关注爱站技术频道。

原文链接:https://js.aizhan.com/web_authoring/css/6115.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有