美观实用的标签切换菜单
<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" ο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="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>
轉載于:https://www.cnblogs.com/tmscnz/archive/2012/11/14/2770622.html
總結
以上是生活随笔為你收集整理的美观实用的标签切换菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 邊做邊學 Internet Explor
- 下一篇： 条款25 ：尽可能延后变量定义式的出现时