CSS网页隔行换色技巧

互联网 发布时间：2008-10-17 19:25:11 作者：佚名

　　CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：一、background背景图片　　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。二、CSSExpression 　　文字：color:expression(th

　　CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：
一、background背景图片
　　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。
二、CSSExpression
　　文字：color:expression(this.sourceIndex%2?'#ff0000':'#000000');
　　背景：background-color:expression(this.sourceIndex%2?'#ff0000':'#000000');
　　注意：本方法浏览器兼容度不够，不支持FF3。
三、class分别定义
<ul>
<liclass="bgcolor">...
<li>...
<liclass="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.jb51.net - 四种实现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 全部选择提示：你可先修改部分代码，再按运行]

css3隔行变换色实现示例
想必大家对隔行变换色的概念都不陌生了吧，其实css3也是可以实现的，下面为大家详细介绍下
2014-02-19
CSS表格样式：圆角，隔行，变色的具体实现
常见的CSS表格样式有圆角、隔行、变色等等，下面有个不错的示例，感兴趣的朋友可以参考下
2013-12-30
css美化表格让其隔行变色显示
单一的表格很容易使人感到枯燥，使用变色效果可以使得表格看起来更加舒适，在本文将为大家介绍下使用css实现隔行变色显示，感兴趣的朋友可以参考下
2013-10-05
CSS expression 隔行换色效果
CSS expression 隔行换色效果实现代码，需要的朋友可以参考下。
2009-12-13
网页设计制作CSS实现隔行换色两种方法-CSS教程-网页制作-网页教学网
网页设计制作,CSS实现隔行换色两种方法: 第一种方法: 以下为引用的内容： <style type="text/css"> UL.myul1
2008-10-17
CSS实现网页中的隔行换色代码-CSS教程-网页制作-网页教学网
　　以前在Dreamweaver中用表格布局网页的时候常常用到一种设计手法--隔行换色。也就是新闻列表或是列表类的每隔一行就换另一个色彩这样显得很漂亮也很合适阅读。所以这种
2008-10-17
HTML n种方式实现隔行变色的示例代码
这篇文章主要介绍了HTML n种方式实现隔行变色的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
2020-06-17

CSS网页隔行换色技巧

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容