非常适合5uCMS的隔行换色代码

作者 席鑫淼 来源 www.ligangxi.com 浏览 发布时间 15/06/29

1、列表页模板调用代码

    <div id="listbox1">  
    <!--page:{$size=8}-->  
    <div id="class_list">  
    <div class="title"><span>[page:createtime $format=yy-mm-dd]</span><a href="[page:aurl]">[page:titlex $len=48]</a></div>  
    <p><a href="[page:aurl]">[page:description $len=350 $lenext=...]</a></p>  
    </div>  
     
    <!--page-->  
    <div  id="fpage">{tag:page}</div>  
    </div> 

2、在列表页模板底部或者是</head>之前放入以下代码

    <script type="text/javascript">  
    <!--  
    var Ptr=document.getElementById("listbox1").getElementsByTagName("p");  
    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>

3、给出需要用到的关键几处CSS代码,完整结合自己的网站风格还需您自行调试~~

    #class_list p  
    {  
        font-size: 12px;  
        line-height: 25px;  
        text-indent: 2em;  
        color: #333333;  
        margin-top: 5px;  
    }  
    .t1  
    {  
        background-color: #EFFEDD;  
    }  
    .t2  
    {  
        background-color: #FFFFFF;  
    }     
    .t3  
    {  
        background-color: #D2FCA0;  
    } 


 

Copyright hd30.cn . Some Rights Reserved 冀ICP备19002383号-1