美观实用的标签切换菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效 </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="http://zyymxwssd.sinaapp.com/">有问题请看这里</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" onmouseover=secBoard(0) width="50%">
<p align="center">菜单特效</td>
<td class="sec11" onmouseover=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="http://www.qpsh.com/javascript/showpage2277.htm">超酷XP风格网页右键菜单</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2276.htm">通用3级联动菜单</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2275.htm">相当好玩的右键弹出菜单</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2274.htm">用CSS设计的纵向导航条实例</a></td>
</tr>
<tr>
<td height="23" width="15">
·</td>
<td height="23" width="180">
<a target="_blank" style="color: #01499a" href="http://www.qpsh.com/javascript/showpage2272.htm">将网站设为首页的代码</a></td>
</tr>
<tr>
<td height="23" width="195" colspan="2">
<p align="right"><font color="#01499A">
<a target="_blank" href="http://www.qpsh.com/listpage/102_1.htm">
<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="http://wawz.sinaapp.com/">网页特效</a></b>是用程序代码在网页中实现特殊效果或者特殊功能的一种技术，它为网页活跃了气氛，增加了网站的亲和力。为网页添加特效，学会添加<a target="_blank" href="http://taobwnz.sinaapp.com/">网页特效</a>的过程能从一定程度上激发网页初学者更加了解HTML语言的结构。</td>
</tr>
</table>
</div></td>
</tr></TBODY>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
