| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS網頁代碼編寫技巧:隔行換色的實現

2008-08-29 06:38:17  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||
 

網頁設計中我們經常會碰到用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.devdao.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>

 
  網頁設計中我們經常會碰到用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" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">   <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>www.devdao.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>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有