网管联盟
|
网管论坛
|
网管u家
|
网管博客
|
网管软件
|
网管求职
|
小游戏
|
网管搜索
|
网管原创
|
网管聚合
|
网管读摘
|
网管焦点
|
世界素材
|
会员投稿
|
会员中心
Windows
Linux
Cisco
网络技术
数据库
黑客攻防
DotNet
Java
PHP
认证
新闻资讯
服务器
存储资讯
网络设备
网管学堂
技术专题
焦点
网吧频道
当前位置： >
bitsCN.com
>
网管学堂
>
网页设计
>
Dreamweaver
>
技术教程
> 仿windows选项卡效果连载3
仿windows选项卡效果连载3
2008-01-17 作者:bitsCN整理 来源:中国网管联盟
点评
投稿
收藏
点击下面的运行，可预览代码效果:
<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> <script language="javascript"> <!-- function secBoard(n,x,y) { for(i=0;i<secTable.cells.length;i++){ secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2";} for(i=0;i<mainTable.tBodies.length;i++){ mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block";} weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅"; } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">当前位置：展馆分布 > <span id="weizi"><b>A</b>展馆<b>1</b>楼展厅</span></td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td> <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td> <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody> </table> </td> </tr> </table>
网管u家u.bitscn@com
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
0
顶一下
TAGs
：
上一篇：
仿windows选项卡效果连载2
下一篇：
如何去除点击链接时出现的虚线框
相关文章列表
网页设计中为网页指定样式的方法
网页设计中未知高度的非表格垂直对齐
页面中CSS 加载方式的优化
网页设计中实现表格强制换行和强制不换行
提高Web页面的性能
页面中CSS加载方式的优化
IE5 到 IE8 的 CSS 兼容列表
网页设计中关于H1的使用技巧
仿windows选项卡效果连载3 评论：
评论加载中…
评论:
请自觉遵守互联网相关政策法规，评论不得超过250字。
验证码：
注册用户
本类热门排行：
1.
一个div里面图片垂直居中的例子
2.
完美的水平垂直居中！！
3.
网页设计中清除浮动的最优方法
4.
选择一个优秀正文字体的15个技巧
5.
页面设计中的层次感
6.
网页设计中为网页指定样式的方法
7.
网页设计中实现表格强制换行和强制不换行
8.
网页设计中未知高度的非表格垂直对齐
9.
网页设计中空格的宽度的说明
10.
IE5 到 IE8 的 CSS 兼容列表
最新推荐文章：
1.
Dreamweaver:标签选择器的妙用
2.
Dreamweaver中轻松插入Java特效
3.
充分利用Dreamweaver8中的查找替换技巧
4.
关于meta中的keyword属性
5.
Dreamweaver技巧十二招
6.
熟悉常用表单格式的五点技巧
7.
Dreamweaver的操作诀窍点滴
8.
dreamweaver制作可控制的横向滚动
9.
Dreamweaver主页制作技巧四则
10.
Dreamweaver：图片应用技巧
网管论坛交流：
·
不疯魔不成活
·
令你大开眼界的真正标准化机房，已整理重
·
华为HCSE OSPF路由协议培训教材 V3.0
·
为赈灾，女孩舍身拍“裸照”
·
Windows Server 2003服务器群集创建和配
·
exchange2k3全套官方资料
·
双儿一周岁了。。。特殊的礼物来啦。。
·
存储备份技术版块守则
·
无盘技术交流区守则
·
DOS命令基础大全之命令详解<作者吐血
评论加载中…
