您的位置：首页 → 网页设计 → HTML/CSS  → CSS如何隔行换色的实现

CSS如何隔行换色的实现

时间：2009/12/16 9:18: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.webjx.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>

相关视频

    没有数据

相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站（主页）变成黑白DW设计网页时组织CSS的建议

文章评论
发表评论

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

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

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