仿windows选项卡效果拾零 - 织梦建站服务网

载入中…

>>更多热门...

>>更多推荐...

您现在的位置：织梦建站服务网 >> 建站教程 >> 网页制作 >> Js＼网页特效 >> 教程正文

仿windows选项卡效果拾零

HITS：	TIME：2007-3-30 12:42:35	AUTHOR：marvello…	URL：蓝色理想
CONTENT INTRODUCE ：

="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1"> <tr> <td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">银行汇款</td> <td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">邮局汇款</td> <td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">网上支付</td> <td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">电话充值</td> <td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手机充值</td> <td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U币卡充值</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf1"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf1"> <tr> <td height="20"><div align="justify">汇款信息：</div></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">开户银行</td> <td width="360"><div align="left">：深圳市商业银行XXX支行</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">帐   户  名</td> <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">帐       号</td> <td><div align="left">：2326 5665 5669 2233 xxxx xxxx</div></td> </tr> </table></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><div align="justify">建议大家在银行汇款时……</div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf2"> <tr> <td height="20"><div align="justify">汇款信息：</div></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle1">通讯地址</td> <td width="360"><div align="left">：深圳市……</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">收   款  人</td> <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">邮       编 </td> <td><div align="left">：xxxxxx</div></td> </tr> </table></td> </tr> <tr> <td height="20"> </td> </tr> <tr> <td height="20"><div align="justify">建议大家在邮局汇款时……</div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf3"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#FD5A02">“网上支付”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#3C8FEC">“电话充值”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#9E3CE8">“手机充值”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#62A70E">“U币卡充值”</font>的信息。</td> </tr> </table></td> </tr> </table> </td> </tr> </table> </div></center> </body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

以上所列几种选项卡虽然表现形式不同，但一般是几个选项卡（导航标签）的合计宽度不应超过其选项栏内容的宽度。
海娃的那个例子也不错,跟我引述的第三个例子类似。

运行代码框
<style> body {font-size:12px;font-family:宋体} ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif); } ul.TabBarLevel1 li{ float:left; padding:0; height:29px; margin-right:1px; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a{ display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{ color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{ color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{ color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{ color:#F30; text-decoration:none; } div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; display:none; } </style> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li> <li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li> <li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa</p><p align='center'><b><a href='/Tech/WebDesign/JSTX/200703/2761_7.html'>上一页</a> <a href='/Tech/WebDesign/JSTX/200703/2761.html'>[1]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_2.html'>[2]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_3.html'>[3]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_4.html'>[4]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_5.html'>[5]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_6.html'>[6]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_7.html'>[7]</a> <font color='red'>[8]</font> <a href='/Tech/WebDesign/JSTX/200703/2761_9.html'>[9]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_10.html'>[10]</a> ... <a href='/Tech/WebDesign/JSTX/200703/2761_9.html'>下一页</a> <a href='/Tech/WebDesign/JSTX/200703/2761_11.html'> >> </a></b></p> <center></center></td> </tr> <tr> <td height="25" align='right' class="Article_tdbgall">教程录入：jerome 责任编辑：jerome </td> </tr> <tr> <td height="25"><li>上一篇教程： <a class='LinkPrevArticle' href='/Tech/WebDesign/JSTX/200703/2760.html' title='文章标题：[JS]用或 || 来兼容FireFox 作者：xling 更新时间：2007-3-30 12:42:34'>[JS]用或 || 来兼容FireFox</a></li><br> <li>下一篇教程： <a class='LinkNextArticle' href='/Tech/WebDesign/JSTX/200703/2764.html' title='文章标题：用javascript实现Base64编码作者：tane274 更新时间：2007-3-30 12:42:36'>用javascript实现Base64编码</a></li></td> </tr> <tr> <td height="25" align='right' class="Article_tdbgall">【字体：<a href="javascript:fontZoomA();" class="top_UserLogin">小</a> <a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】【<a href="/Tech/Comment.asp?ArticleID=2761" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=1002&InfoID=2761" target="_blank">加入收藏</a>】【<a href="/Tech/SendMail.asp?ArticleID=2761" target="_blank">告诉好友</a>】【<a href="/Tech/Print.asp?ArticleID=2761" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】 </td> </tr> </table> <br> <table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="575" border=0> <tr> <td class=main_shadow></td> </tr> <tr> <td class=main_title_575><B>相关教程</B></td> </tr> <tr> <td class=main_tdbg_575> <a class='LinkArticleCorrelative' href='/Tech/WebGuide/Experience/200707/3288.html' title='文章标题：图文教程：Discuz!5.5 JS的调用作者：佚名更新时间：2007-7-24 15:02:52' target="_self">图文教程：Discuz!5.5 JS的调用</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3281.html' title='文章标题：用javascript 转换外部链接样式作者：幻想曲更新时间：2007-7-19 17:17:27' target="_self">用javascript 转换外部链接样式</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3278.html' title='文章标题：用javascript实现select的美化作者：jxdawei 更新时间：2007-7-19 17:17:08' target="_self">用javascript实现select的美化</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3270.html' title='文章标题：javascript 的事件冒泡 demo 作者：Realazy 更新时间：2007-7-19 17:15:39' target="_self">javascript 的事件冒泡 demo</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3269.html' title='文章标题：面向对象的 javascript 作者：mozart0 更新时间：2007-7-19 17:15:35' target="_self">面向对象的 javascript</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3267.html' title='文章标题：仿6room网站图片链接效果作者：webflash 更新时间：2007-7-19 17:15:23' target="_self">仿6room网站图片链接效果</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDraw/FW/200704/3213.html' title='文章标题：打破玻璃的动画效果作者：jsuper 更新时间：2007-4-27 9:58:19' target="_self">打破玻璃的动画效果</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3210.html' title='文章标题：[Flash] 图片轮换效果作者：HBrO 更新时间：2007-4-27 9:58:06' target="_self">[Flash] 图片轮换效果</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3200.html' title='文章标题：flash8 绘制至尊土豆作者：lele 更新时间：2007-4-27 9:57:53' target="_self">flash8 绘制至尊土豆</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3197.html' title='文章标题：AS+JS的Flash网站无刷新定位技术作者：HBrO 更新时间：2007-4-27 9:57:47' target="_self">AS+JS的Flash网站无刷新定位技术</a><br></td> </tr> <tr> <td class=main_shadow></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=575 border=0> <tr> <td height=25 class=main_title_575><b>网友评论：</b>（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）</td> </tr> <tr> <td class=main_tdbg_575 height=30> <script language='javascript' src='/Tech/Comment.asp?Action=JS&CommentNum=10&ArticleID=2761'></script></td> </tr> </table> </td> </tr> </table>  <iframe src="/popbbs.asp" width="0" height="0" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <table cellSpacing=0 cellPadding=0 width=776 align=center border=0> <tr> <td class=F11 align=middle background=/Skin/17zm_v6/bottom_r1_c1.jpg height=33><A class=bottom href="http://www.miibeian.gov.cn/" target=_blank>湘ICP备05010790号</A> <FONT color=#ffffff>{$Wap}</FONT></td> </tr> <tr> <td align=middle background=/Skin/17zm_v6/bottom_r2_c1.jpg height=25><A class=bottom href="/SiteInfo.asp?info=about" target=_blank>关于我们</A> | <A class=bottom href="/SiteInfo.asp?info=history" target=_blank>版本历史</A> | <A class=bottom href="/SiteInfo.asp?info=Contact" target=_blank>联系方法</A> | <A class=bottom href="/SiteInfo.asp?info=Privacy" target=_blank>隐私条例</A> | <A class=bottom href="/SiteInfo.asp?info=linkus" target=_blank>链接我们</A> | <A class=bottom href="/SiteInfo.asp?info=Advertise" target=_blank>广告服务</A> | <A class=bottom href="/SiteInfo.asp?info=FAQ" target=_blank>常见问题</A> | <A class=bottom href="/FriendSite" target=_blank>友情链接</A> | <A class=bottom href="/Announcelist.asp" target=_blank>网站公告</A> | <A class=bottom onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.17zm.net');" href="/$">设为首页</A> | <A class=bottom href="javascript:window.external.addFavorite('http://www.17zm.net','织梦建站服务网');">收藏本站</A></td> </tr> <tr> <td align=middle background=/Skin/17zm_v6/bottom_r3_c1.jpg height=26><SPAN class=f11>Copyright © 2001-2006 <STRONG>17zm.NET</STRONG> All Rights Reserved. <A class=bottom href="http://zmstudio.17zm.net/" target=_blank><IMG height=17 alt=织梦建站工作室 src="/Skin/17zm_v6/zmci_84-48.gif" width=29 align=absMiddle border=0></A>[<A class=bottom href="http://zmstudio.17zm.net/" target=_blank><STRONG>织梦建站工作室</STRONG></A>]™荣誉出品. Since <STRONG>2001</STRONG></SPAN></td> </tr> <tr> <td height=7><IMG id=bottom_r4_c1 height=7 alt="" src="/Skin/17zm_v6/bottom_r4_c1.jpg" width=776 border=0 name=bottom_r4_c1></td> </tr> </table> <iframe src="/stat.htm" width="0" height="0" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>  </body> </html> <NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>