选项卡（基于Table表格）

2024-09-05 12:20:17

字体：大中小

来源：转载

供稿：网友

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

<html><head><meta http-equiv="Content-Type" content="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>

上一篇：css制作菜单上浮动的小图标

下一篇：蓝色选项卡（CSS+Table+JS）