100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > CSS网页隔行换色技巧

CSS网页隔行换色技巧

时间:2023-12-27 02:50:58

相关推荐

CSS网页隔行换色技巧

人生本是一个不断学习的过程,在这个过程中,就是你们的好帮手,下面分享的CSS网页隔行换色技巧懂设计的网友们快点来了解吧!

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//DTDXHTML1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" / - 四种实现CSS隔行换色的方法/titlelink 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; itables.length; i++){var odd = false;trs = tables[i].getElementsByTagName("tr");for(var j=0; jtrs.length; j++){if(odd==true){trs[j].style.background = "#ccc";odd = false;}else{odd = true;}}}}window.onload = bgChange;/script/headbody table width="600" border="0" align="center" cellpadding="0" cellspacing="0"trtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/trtrtd测试文字/tdtd测试文字/tdtd测试文字/td/tr/tablescript type="text/javascript"//![CDATA[if (document.getElementById(processtime)) document.getElementById(processtime).innerHTML="spanRun in 184 ms, 9 Queries./span";//]]/script/body/html

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。