日期:2014-05-18 浏览次数:20092 次
仿windows选项卡或叫做tabpan以及tabpage,现在还有最新的进展譬如仿淘宝网导航菜单效果皆属于此类:
以下是HTML网页特效代码,点击运行按钮可查看效果: 以下是程序代码<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>menu</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-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #ffffff; color: #000000; font-size: 12px; } td{ font-size:12px; line-height: 150%; } .white {color: #ffffff} .cardNormal { CURSOR: hand; COLOR: #000000; font-size:12px; BACKGROUND-COLOR: #FFFFFF; border-top: 1px solid #0A6CCE; border-right: 1px solid #0A6CCE; border-bottom: 1px solid #0A6CCE; border-left: 1px solid #0A6CCE; } .cardSelected { BORDER-left: 1px solid #0A6CCE; BORDER-RIGHT: 1px solid #0A6CCE; BORDER-TOP: 1px solid #0A6CCE; FONT-WEIGHT: normal; CURSOR: hand; COLOR: #000000; font-size:12px; BACKGROUND-COLOR: #E1EFFD; } .boardMain { BORDER-RIGHT: 1px solid #dbe9fd; BORDER-LEFT: 1px solid #dbe9fd; COLOR: #F1AB65; LINE-HEIGHT:200%; BORDER-BOTTOM:1px solid #0A6CCE; BORDER-left: 1px solid #0A6CCE; BORDER-RIGHT: 1px solid #0A6CCE; BACKGROUND-COLOR:#E1EFFD; } .cardSpace { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } .cardSpaceLeft { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } .cardSpaceLast { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } A.nav1:link {COLOR: #000000; TEXT-DECORATION: none} A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none} A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none} .erect{ COLOR: #ffffff; WRITING-MODE: tb-rl; TEXT-ALIGN:left; letter-spacing:2px; } A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none} A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none} A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none} A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none} </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>