博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js tab标签页
阅读量:4158 次
发布时间:2019-05-26

本文共 3994 字,大约阅读时间需要 13 分钟。

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效 >
<style>
body {
 font-family: "宋体";
 font-size: 12px;
 color: #525252;
}
td {
 font-family: "宋体";
 font-size: 12px;
 color: #525252;
}
a:link {
 color: #525252;
 font-size: 12px;
 text-decoration: none;
}
a:visited{
 color: #525252;
 font-size: 12px;
 text-decoration: none;
}
a:hover {
 color: #ff6600;
 font-size: 12px;
 text-decoration: underline;
}
.gd1{
 font-family: "宋体";
 font-size: 12px;
 color: #ff0000;
}

.sec11 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; BORDER-LEFT: #C5E1FE 1px solid; CURSOR: hand; COLOR: #01499A; BORDER-BOTTOM: #C5E1FE 1px solid; BACKGROUND-COLOR: #ffffff}

.sec21 {BORDER-RIGHT: #C5E1FE 1px solid; BORDER-TOP: #C5E1FE 1px solid; FONT-WEIGHT: 800;color:#01499A; BORDER-LEFT: #C5E1FE 1px solid;BORDER-BOTTOM: #C5E1FE 1px solid; CURSOR: hand; BACKGROUND-COLOR: #E6EEF7;BACKGROUND:url('/icon/098.gif') no-repeat}
.main_tab {BACKGROUND-COLOR: #ffffff}
</style>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
  {
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells

[i].className="sec11";

    secTable.cells[n].className="sec21";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies

[i].style.display="none";

    mainTable.tBodies

[n].style.display="block";

  }
</SCRIPT>
</head>

<body>

<p align="center">这里便于演示,只设置了两个栏目切换,你可以根据需要,自行增加栏目!修改CSS使它更适合你的网站<br>
<br>
<a target="_blank" href="">有问题请看这里</a></p>
<div align="center">
       <table border="0" width="200" cellpadding="0" cellspacing="0" style="border-collapse: collapse" height="145" id="table7" bgcolor=#ecf5ff>
        <tr>
         <td height="145">
         <div align="center">
          <table border="0" width="200" cellpadding="0" style="border-collapse: collapse" height="140" id="table107">
           <tr>
            <td height="25">
            <div align="center">
             <table border="0" width="220" cellpadding="0" style="border-collapse: collapse" height="22" id=secTable>
              <tr>
               <td class=sec21 οnmοuseοver=secBoard(0) width="50%">
               <p align="center">菜单特效</td>
               <td class=sec11 οnmοuseοver=secBoard(1) width="50%">
               <p align="center">网页特效简介</td>
              </tr>
             </table>
            </div>
            </td>
           </tr>
           <tr>
            <td height="115">
            <div align="center">
             <table id=mainTable border="0" width="195" cellpadding="0" style="border-collapse: collapse" height="115">
             <TBODY style="DISPLAY: block"><tr>
               <td height="145"><div align="center">
       <table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138">
        <tr>
         <td height="23" width="15" valign="middle">
            ·</td>
         <td height="23" width="180">
         <a target="_blank" style="color: #01499a" href="">超酷XP风格网页右键菜单</a></td>
        </tr>
        <tr>
         <td height="23" width="15">
            ·</td>
         <td height="23" width="180">
         <a target="_blank" style="color: #01499a" href="">通用3级联动菜单</a></td>
        </tr>
        <tr>
         <td height="23" width="15">
            ·</td>
         <td height="23" width="180">
         <a target="_blank" style="color: #01499a" href="">相当好玩的右键弹出菜单</a></td>
        </tr>
        <tr>
         <td height="23" width="15">
            ·</td>
         <td height="23" width="180">
         <a target="_blank" style="color: #01499a" href="">用CSS设计的纵向导航条实例</a></td>
        </tr>
        <tr>
         <td height="23" width="15">
            ·</td>
         <td height="23" width="180">
         <a target="_blank" style="color: #01499a" href="">将网站设为首页的代码</a></td>
        </tr>
        <tr>
         <td height="23" width="195" colspan="2">
            <p align="right"><font color="#01499A">
            <a target="_blank" href="">
            <font color="#01499A">更多</font><font color="#01499A" face="Arial">>>></font></a></font></td>
         </tr>
        </table>
      </div></td>
              </tr></TBODY>
              <TBODY style="DISPLAY: none"><tr>
               <td height="145"><div align="center">
       <table border="0" width="205" cellpadding="0" style="border-collapse: collapse" height="138">
        <tr>
         <td height="138" width="195" style="line-height: 150%">
               
            <b>
            <a target="_blank" href="">网页特效</a></b>是用程序代码在网页中实现特殊效果或者特殊功能的一种技术,它为网页活跃了气氛,增加了网站的亲和力。为网页添加特效,学会添加<a target="_blank" href="">网页特效</a>的过程能从一定程度上激发网页初学者更加了解HTML语言的结构。</td>
        </tr>
        </table>
      </div></td>
              </tr></TBODY>
             </table>
            </div>
            </td>
           </tr>
          </table>
         </div>
         </td>
        </tr>
        </table>
      </div>
</body>

</html>

本代码由<a href=http://www.qpsh.com>网页特效网</a>提供

转载地址:http://bcyxi.baihongyu.com/

你可能感兴趣的文章
jQuery ajax - ajax() 方法
查看>>
将有序数组转换为平衡二叉搜索树
查看>>
最长递增子序列
查看>>
从一列数中筛除尽可能少的数,使得从左往右看这些数是从小到大再从大到小...
查看>>
判断一个整数是否是回文数
查看>>
腾讯的一道面试题—不用除法求数字乘积
查看>>
素数算法
查看>>
java多线程环境单例模式实现详解
查看>>
将一个数插入到有序的数列中,插入后的数列仍然有序
查看>>
在有序的数列中查找某数,若该数在此数列中,则输出它所在的位置,否则输出no found
查看>>
阿里p8程序员四年提交6000次代码的确有功,但一次错误让人唏嘘!
查看>>
一道技术问题引起的遐想,最后得出结论技术的本质是多么的朴实!
查看>>
985硕士:非科班自学编程感觉还不如培训班出来的,硕士白读了?
查看>>
码农:和产品对一天需求,产品经理的需求是对完了,可我代码呢?
查看>>
第六章 背包问题——01背包
查看>>
1136 . 欧拉函数
查看>>
面试题:强制类型转换
查看>>
Decorator模式
查看>>
Template模式
查看>>
Observer模式
查看>>