选项卡(基于Table表格)_菜单导航特效

织梦DedeCMS视频教程买空间租服务器选网硕互联！ 无忧站长工具,百度权重一键全查!

基于表格的Tab选项卡，不熟悉CSS的朋友相信会喜欢的，淡蓝色风格，效果也很不错，代码还可以继续进行优化，这里只做出一个雏形，使用者请根据你的网页风格自行修改吧。

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>选项卡</title>
<base target="_blank">
<style> 
A:link {COLOR: #0000cc; TEXT-DECORATION: underline}
A:visited {COLOR: #551a8b; TEXT-DECORATION: underline}
A:active{COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
body {
 margin: 0px;
 font-size: 12px;
}
td{
 font-size:12px;
 line-height: 150%;
}
.white {
color: #ffffff
}
.cardNormal {
 CURSOR: hand;
 font-size:12px;
 border: 1px solid #0A6CCE;}
.cardSelected {
BORDER: 1px solid #0A6CCE;
 FONT-WEIGHT: normal;
 CURSOR: hand;
 font-size:12px;
 BACKGROUND-COLOR: #E1EFFD;
}
.boardMain {
 COLOR: #F1AB65;
 LINE-HEIGHT:200%;
 BORDER-BOTTOM:1px solid #0A6CCE;
BORDER-left: 1px solid #0A6CCE;
 BORDER-RIGHT: 1px solid #0A6CCE;
 BACKGROUND-COLOR:#E1EFFD;
}

</style>
</head>
<body bgcolor="#FFFFFF">
 
<table width="230" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>

<script language=javascript> 
function secCard(n)
{
for(i=0;i<secTable.cells.length;i++) 
  secTable.cells[i].className="cardNormal";
secTable.cells[n].className="cardSelected";
for(i=1;i<secTable.cells.length;i=i+2) 
  secTable.cells[i].className="cardSpace";
secTable.cells[n+1].className="cardSpaceLeft";
secTable.cells[3].className="cardSpaceLast";
}
function secBoard(n)
{
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="";
}
</script>
<td width="25" rowspan="2" align="center" bgcolor="#0A6CCE" ><span class="erect">
中国</span></TD>
<td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable>
<TBODY>
<TR>
<TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);" style="padding:0 0 0 0">menu1</TD>
<TD width="2" height="20" class="cardSpace"> </TD>
  <TD align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">menu2</TD>
<TD width="2" height="20" class="cardSpace"> </TD>
 
</TR>
</TBODY>
</TABLE></TD>
</TR>
<tr>
<td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable">
<TBODY style="DISPLAY: block">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="75" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>abcde</td>
</tr>
</table></TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="69"><div align="center"></div> 
abcde</td>
</tr>
</table></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TABLE>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-03

[收藏][报错][返回列表]

评论加载中....

选项卡(基于Table表格)_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

鏀惰棌&鍒嗕韩