比较有用的效果,LI列表输出,隔行…

来源:互联网 发布:c语言打开txt文件失败 编辑:程序博客网 时间:2024/05/21 01:42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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>无标题文档</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(http://www.blueidea.com/img/common/new_flash.gif) 3px50% 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{padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new.gif)#D2FCA0 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted;font-family: "Verdana,宋体";font-size:12px;color:#008000;text-align:left;height:25px;}
</style>
<bodystyle=margin:0;><br><br><br>
<div align="center">
<div class=mytable id=tab>
<ul>
   <li><ahref="#">这个是第1行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第2行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第3行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第4行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第5行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第6行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第7行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第8行的文字,大家看清楚了</a></li>
<li><ahref="#">这个是第9行的文字,大家看清楚了</a></li>
</ul></div><scripttype="text/javascript">
<!--
varPtr=document.getElementByIdx_x("tab").getElementsByTagName_r("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://blog.sina.com.cn/jieeeee
原创粉丝点击