CSS网页代码编写技巧-隔行换色的实现_html-js-css

概述网页设计中我们经常会碰到用CSS（层叠样式表）实现隔行换色的需求，您可以根据您的需要，采用下面的任何一种方法，当然要注意适合你的具体编码与需求情况。一、使用background背景图片如果行高固定的话，推荐使用隔行换色的背景图，也推荐将行高固定，这样可以兼容一切浏览器。二、CSS… 网页设计中我们经常会碰到用CSS（层叠样式表）实现隔行换色的需求，您可以根据您的需要，采用下面的任何一种方法，当然要注意适合你的具体编码与需求情况。

　　一、使用background背景图片

　　如果行高固定的话，推荐使用隔行换色的背景图，也推荐将行高固定，这样可以兼容一切浏览器。

　　二、CSS Expression

　　文字：color:Expression(this.sourceIndex%2 ? '#ff0000':'#000000');
　　背景：background-color:Expression(this.sourceIndex%2 ? '#ff0000':'#000000');
　　注意：本方法浏览器兼容度不够，不支持FF3。

　　三、class分别定义

　　实实在在的写法。

　　四、通过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.wfuyu.com - 四种实现CSS隔行换色的方法</Title>　　<link href="index.CSS" rel="stylesheet" type="text/CSS" />　　　　</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>　　</body>　　</HTML>

总结

以上是内存溢出为你收集整理的CSS网页代码编写技巧-隔行换色的实现全部内容，希望文章能够帮你解决CSS网页代码编写技巧-隔行换色的实现所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1024645.html

CSS网页代码编写技巧-隔行换色的实现

发表评论

评论列表（0条）