CSS網頁隔行換色技巧

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS網頁隔行換色技巧

CSS網頁隔行換色技巧

編輯：CSS進階教程

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

一、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>
實實在在的寫法。

四、通過JS 看實例

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.poluoluo.com - 四種實現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>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</td> </tr> <tr> <td>測試文字</td> <td>測試文字</td> <td>測試文字</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>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

CSS進階教程

CSS教程:CSS定位屬性: 網頁制作poluoluo文章簡介：CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局
CSS教程:關於網頁圖片的屬性: 圖片外框特征參數: ①dashed：虛線②dotted：點虛線③solid：實線④doub
CSS教程(5)：通過實例學習CSS背景: 本CSS教程介紹：1.如何使用像素來定位背景圖像，2.如何設置固定的背景圖像，3.所有背景屬性在一個

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章