您正在使用 IPV4 [18.209.66.87] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS脚本+CSS实现LI列表输出,隔行变色
内容摘要: !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-equ......
<!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>无标题文档</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) 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 href="#">这个是第1行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第2行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第3行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第4行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第5行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第6行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第7行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第8行的文字,大家看清楚了</a></li>

<li><a href="#">这个是第9行的文字,大家看清楚了</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>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:在左边显示滚动条

 

下一篇:辨别浏览器

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:4
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....