当前位置:主页 > 知识大宝库 > 代码素材 >

ul隔行换色

来源:未知  作者:南宁网站建设  日期:2015-08-22 20:40

<!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=gb2312" />
<title>ul/LI结构的隔行换色及鼠标滑过变色-广西南宁网站建设</title>
<meta name="keywords" content="网页特效,网页模板,导航菜单,焦点幻灯片,JS代码" />
<meta name="description" content="广西南宁网站建设为您提供企业网站制作,dedecms企业仿站,商城建设。" />
</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:1em;list-style:none;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px; line-height:25px;}
.mytable ul li a{ color:#333; text-decoration:none;}
.mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */
.mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */
.mytable ul li.t3 {background-color:#D2FCA0;}/* 鼠标经过时的背景色 */
</style>
<body>
<div class=mytable id=tab>
    <ul>
    <li><a href="http://www.woyaofz.com">广西南宁网站建设-解放出你的部分写代码时间来思考更高层次的设计</a></li>
    <li><a href="http://www.woyaofz.com/JS">广西南宁网站建设-解放出你的部分写代码时间来思考更高层次的设计</a></li>
    <li><a href="http://www.woyaofz.com/JS/AD">广西南宁网站建设-解放出你的部分写代码时间来思考更高层次的设计</a></li>
    <li><a href="http://www.woyaofz.com">广西南宁网站建设-解放出你的部分写代码时间来思考更高层次的设计</a></li>
    <li><a href="http://www.woyaofz.com">广西南宁网站建设-解放出你的部分写代码时间来思考更高层次的设计</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>
 

本文地址:http://g9gx.com/zhishi/sucai/80.html 在线咨询

上一篇:js图文列表向左滚动

下一篇:相当简单的自适应瀑布流

关注&咨询
谷九建站