首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
文本操作
> 正文
实现表格隔行换色效果
2009-12-19 文本操作 159℃
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格隔行换色</title> <style type="text/css" media="screen"> <!-- /* PR-CSS */ table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;} table td {border:solid #999;border-width:0 1px 1px 0;} .t1 {background-color:#fff;}/* 第一行的背景色 */ .t2 {background-color:#eee;}/* 第二行的背景色 */ .t3 {background-color:#ccc;}/* 鼠标经过时的背景色 */ --> </style> </head> <body> <ul><li>11111111</li> <li>222222222</li> <li>3333333</li> <li>444444444</li> </ul> <script type="text/javascript"> <!-- var Ptr=document.getElementsByTagName("li"); function $() { for (i=1;i<Ptr.length+1;i++) { Ptr[i-1].className = (i%2>0)?"t1":"t2"; } } window.onload=$; for(var i=0;i<Ptr.length;i++) { Ptr[i].onmouseover=function(){ this.tmpClass=this.className; this.className = "t3"; }; Ptr[i].onmouseout=function(){ this.className=this.tmpClass; }; } //--> </script> </body> </html>
相关特效代码
无相关信息
热门特效代码
输入框的文字闪烁变色引人注意
纯CSS内页内容切换选项卡
鼠标经过链接显示注释旋转风火轮
指向自动选择的输入框
放大镜链接效果
带注释的链接特效
文字闪烁效果
带注释的链接特效代码
点击文字显示隐藏链接
WEB2.0圆形边框css做法
推荐特效代码
字符连续消隐
文字变色逐个出现
段落文字百叶窗效果输出
点击文字显示隐藏链接
文字由小变大由大变小(动态变化
文字来回上下移动或跳动