CSS实现Li列表隔行换色效果的方法

作者: 计算机网络  发布:2019-09-06

正文实例陈述了JS+CSS达成Li列表隔行换色效果的格局。分享给大家供大家参考。具体落实情势如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>CSS+Js达成Li列表隔行换色效果</title>
</head><body>
<style>
.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;}
.mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(/images/20110704/new_dot.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;}
.mytable ul li.t1 {background-color:#EFFEDD;}
.mytable ul li.t2{background-color:#ffffff;}
.mytable ul li.t3 {background-color:#D2FCA0;}
</style>
<body style=margin:0;><br><br><br>
<div align="center">
<div class=mytable id=tab>
<ul>
<li>
<a title="JavaScript达成文字与图片拖拽效果的形式" target="_blank" href="//www.jb51.net/article/61182.htm">
JavaScript落实文字与图片拖拽效果的点子</a></li>
<li>
<a title="jQuery实现点击图片翻页浮现效果的措施" target="_blank" href="//www.jb51.net/article/61181.htm">
jQuery完成点击图片翻页呈现效果的方法</a></li>
<li>
<a title="php达成递归与极端分类的主意" target="_blank" href="//www.jb51.net/article/61180.htm">
php落成递归与极端分类的措施</a></li>
<li>
<a title="php达成多维数组中各样单元值(数字)翻倍的方法" target="_blank" href="//www.jb51.net/article/61179.htm">
php完结多维数组中各样单元值(数字)翻倍的主意</a></li>
<li>
<a title="php数组增添与删除单元的常用函数实例解析" target="_blank" href="//www.jb51.net/article/61178.htm">
php数组增多与删除单元的常用函数实例深入分析</a></li>
<li>
<a title="JS+CSS落成可拖动的弹出提醒框" target="_blank" href="//www.jb51.net/article/61177.htm">
JS+CSS实现可拖动的弹出提醒框</a></li>
<li>
<a title="js实现下拉框选用要体现图片的法子" target="_blank" href="//www.jb51.net/article/61176.htm">
js完成下拉框接纳要显得图片的主意</a></li>
<li>
<a title="js实现点击图片将图片地址复制到粘贴板的不二秘技" target="_blank" href="//www.jb51.net/article/61175.htm">
js完成点击图片将图片地址复制到粘贴板的办法</a></li>
</ul></div><script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").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>

企望本文所述对大家的javascript程序设计有着扶助。

您只怕感兴趣的稿子:

  • 动用JavaScript和CSS达成文件隔行换色的方法
  • 原生javascript达成隔行换色
  • JS达成简洁(隔行换色、高亮展现)表格特效
  • javascript 隔行换色函数代码
  • Js 完毕表格隔行换色一例
  • 绝不javascript实现带序号的报表隔行换色的效用
  • 33种Javascript 表格排序控件搜罗
  • javascript 表格排序和表头浮动作效果果(扩张SortTable)
  • jquery tablesorter.js 支持汉语表格排序创新
  • js完成表格字段排序
  • JS完结隔行换色的报表排序

本文由今晚开什么码发布于计算机网络,转载请注明出处:CSS实现Li列表隔行换色效果的方法

关键词:

上一篇:jQuery实现鼠标滑过Div层背景变颜色的方法
下一篇:没有了