您的位置：首页 → 网页设计 → HTML/CSS  → CSS隔行换色的编写方法

CSS隔行换色的编写方法

时间：2008/11/12 9:40:00来源：本站整理作者：我要评论(0)

 

网页设计中我们经常会碰到用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>

相关视频

    没有数据

相关阅读 dnf普雷攻略机制详解 dnf普雷攻略机制BOSS打法全介绍lol亚索战场boss皮肤多少钱 lol亚索战场boss皮肤特效视频一览lol奇亚娜战场BOSS皮肤特效一览 lol奇亚娜战场BOSS皮肤特效视频dnf代号希望隐藏Boss掉落什么 dnf代号希望隐藏Boss掉落奖励介绍武士零隐藏BOSS在哪 武士零隐藏BOSS位置触发条件地铁逃离dlss怎么开 地铁逃离dlss光追开启方法嗜血印牛头人怎么打 嗜血印牛头人BOSS打法解析侍魂胧月传说年兽世界BOSS在哪里 年兽世界BOSS位置介绍

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法