作业帮CSS网页代码编写隔行换色的教程
来源：学生作业帮助网 编辑：作业帮 时间：2024/04/27 13:30:35 CSS
CSS网页代码编写隔行换色的教程CSS
【无忧考网-CSS网页代码编写隔行换色的教程】：
网页设计中我们经常会碰到用CSS（层叠样式表）实现隔行换色的需求，您可以根据您的需要，采用下面的任何一种方法，当然要注意适合你的具体编码与需求情况。
http-equiv="Content-Type" content="text/html; charset=utf-8" />
www.<FONT color=#333333>dev</FONT>dao - 四种实现CSS隔行换色的方法
ipt type="text/javascript">
function bgChange(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for(var i=0; i var odd = false;
trs = tables[i].getElementsByTagName("tr");
for(var j=0; j if(odd==true){
trs[j].style.background = "#ccc";
odd = false;
}else{
odd = true;
}
}
}
}
window.onload = bgChange;
CSS
网页设计中我们经常会碰到用CSS（层叠样式表）实现隔行换色的需求，您可以根据您的需要，采用下面的任何一种方法，当然要注意适合你的具体编码与需求情况。
一、使用background背景图片
如果行高固定的话，推荐使用隔行换色的背景图，也推荐将行高固定，这样可以兼容一切浏览器。
二、CSS Expression
文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
注意：本方法浏览器兼容度不够，不支持FF3。
三、class分别定义
- ...
- ...
- ...
- ...
实实在在的写法。
四、通过JS
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
xmlns="">
http-equiv="Content-Type" content="text/html; charset=utf-8" />
function bgChange(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for(var i=0; i
trs = tables[i].getElementsByTagName("tr");
for(var j=0; j
trs[j].style.background = "#ccc";
odd = false;
}else{
odd = true;
}
}
}
}
window.onload = bgChange;
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
| 测试文字 | 测试文字 | 测试文字 |
CSS