自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

四種方法輕松實現(xiàn)CSS隔行換色

作者：52css
開發(fā) 前端
你對CSS隔行換色的方法你是否了解，這里和大家分享一下四種實現(xiàn)CSS隔行換色的方法，相信本文介紹一定會讓你有所收獲。

本文和大家重點討論一下四種實現(xiàn)CSS隔行換色的方法，它們分別是background背景圖片，CSSExpression，使用class分別定義，通過JS看實例，希望本文介紹對你有所幫助。

四種實現(xiàn)CSS隔行換色的方法

CSS隔行換色的問題，其實很簡單，您可以根據(jù)您的需要，采用下面的任何一種方法，當然，要適合你的編碼與需求情況：

一、background背景圖片

　　如果行高固定的話，推薦使用背景圖，也推薦將行高固定！兼容一切瀏覽器。

二、CSSExpression

　　文字：

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

 　　背景：

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

 　　注意：本方法瀏覽器兼容度不夠，不支持FF3。

三、class分別定義

ExampleSourceCode 

  1. <ul> 
  2. <liclassliclass="bgcolor">...  
  3. <li>...  
  4. <liclassliclass="bgcolor">...  
  5. <li>...  
  6. </ul> 
  7.  

實實在在的寫法。

四、通過JS看實例

SourceCodetoRun

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  6. <title>www.52CSS.com-四種實現(xiàn)CSS隔行換色的方法</title> 
  7. <linkhreflinkhref="index.css"rel="stylesheet"type="text/css"/> 
  8. <scripttypescripttype="text/javascript"> 
  9. functionbgChange(){  
  10. if(!document.getElementsByTagName)returnfalse;  
  11. vartables=document.getElementsByTagName("table");  
  12. for(vari=0;i<tables.length;i++){  
  13. varodd=false;  
  14. trs=tables[i].getElementsByTagName("tr");  
  15. for(varj=0;j<trs.length;j++){  
  16. if(odd==true){  
  17. trs[j].style.background="#ccc";  
  18. odd=false;  
  19. }else{  
  20. odd=true;  
  21. }  
  22. }  
  23. }  
  24. }  
  25. window.onload=bgChange;  
  26. </script> 
  27. </head> 
  28. <body> 
  29. <tablewidthtablewidth="600"border="0"align="center"cellpadding="0"  
  30. cellspacing="0"> 
  31. <tr> 
  32. <td>測試文字</td> 
  33. <td>測試文字</td> 
  34. <td>測試文字</td> 
  35. </tr> 
  36. </table> 
  37. <scripttypescripttype='text/javascript'> 
  38. //<![CDATA[  
  39. if(document.getElementById('processtime'))document.
  40. getElementById('processtime').innerHTML="<spanclass='runtimedisplay'>  
  41. Runin184ms,9Queries.</span>";  
  42. //]]> 
  43. </script></body> 
  44. </html> 

[可先修改部分代碼再運行查看效果]

【編輯推薦】

  1. 提高CSS文件可維護、可讀性四大技巧
  2. CSS網(wǎng)頁布局中文字排版九大技巧
  3. 解析CSS網(wǎng)頁布局的意義與副作用
  4. 實用但不被IE支持的十大CSS屬性
  5. CSS中id與class命名規(guī)則及編碼最佳習慣
責任編輯：佚名 來源： 52css.com
CSS
點贊
收藏

51CTO技術棧公眾號