您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 實(shí)現(xiàn)CSS隔行換色的方法
實(shí)現(xiàn)CSS隔行換色的方法
文章來源：365jz.com 點(diǎn)擊數(shù)：542 更新時(shí)間：2010-04-01 23:44 參與評(píng)論
CSS隔行換色的問題，其實(shí)很簡(jiǎn)單，您可以根據(jù)您的需要，采用下面的任何一種方法，當(dāng)然，要適合你的編碼與需求情況：
一、background背景圖片
如果行高固定的話，推薦使用背景圖，也推薦將行高固定！兼容一切瀏覽器。
二、CSS Expression
文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
注意：本方法瀏覽器兼容度不夠，不支持FF3。
三、class分別定義
<ul> <li class="bgcolor">... <li>... <li class="bgcolor">... <li>... </ul> |
實(shí)實(shí)在在的寫法。
四、通過JS 看實(shí)例
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.52css.com 四種實(shí)現(xiàn)CSS隔行換色的方法</title> <link href="index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function bgChange(){ if(!document.getElementsByTagName) return false; var tables = document.getElementsByTagName("table"); for(var i=0; i<tables.length; i++){ var odd = false; trs = tables[i].getElementsByTagName("tr"); for(var j=0; j<trs.length; j++){ if(odd==true){ trs[j].style.background = "#ccc"; odd = false; }else{ odd = true; } } } } window.onload = bgChange; </script> </head> <body > <table width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> <tr> <td>測(cè)試文字</td> <td>測(cè)試文字</td> <td>測(cè)試文字</td> </tr> </table> <script type='text/javascript'> //<![CDATA[ if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 184 ms, 9 Queries.</span>"; //]]> </script></body> </html> |
如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
------分隔線----------------------------
