CSS网页隔行换色技巧

2024-07-11 08:37:48

字体：大中小

来源：转载

供稿：网友

CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：
一、background背景图片
　　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。
二、CSSExpression
　　文字：color:expression(this.sourceIndex%2?’#ff0000′:’#000000′);
　　背景：background-color:expression(this.sourceIndex%2?’#ff0000′:’#000000′);
　　注意：本方法浏览器兼容度不够，不支持FF3。
三、class分别定义

实实在在的写法。
四、通过JS看实例

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p><title>www.Vevb.com – 四种实现CSS隔行换色的方法</title></p><p><link href="index.css" rel="stylesheet" type="text/css" /></p><p><script type="text/javascript"></p><p>function bgChange(){</p><p>if(!document.getElementsByTagName) return false;</p><p>var tables = document.getElementsByTagName("table");</p><p>for(var i=0; i<tables.length; i ){</p><p>var odd = false;</p><p>trs = tables[i].getElementsByTagName("tr");</p><p>for(var j=0; j<trs.length; j ){</p><p>if(odd==true){</p><p>trs[j].style.background = "#ccc";</p><p>odd = false;</p><p>}else{</p><p>odd = true;</p><p>}</p><p>}</p><p>}</p><p>}</p><p>window.onload = bgChange;</p><p></script></p><p></head></p><p><body ></p><p><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"></p><p><tr></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p></tr></p><p><tr></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p></tr></p><p><tr></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p></tr></p><p><tr></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p></tr></p><p><tr></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p><td>测试文字</td></p><p></tr> </SPAN> </div> </div> <div class=page1> <p align="center" class="pageLink"></p> </div> <div class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342697.html'>浅谈只要css就能实现的骨架屏方案</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342699.html'>使用常见的sticky footer布局方式</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>发表评论</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342698">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342698&down=2"></script></span>条评论</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用户名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密码: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名发表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

学习交流