网管联盟
|
网管论坛
|
网管u家
|
网管博客
|
网管软件
|
网管求职
|
小游戏
|
网管搜索
|
网管原创
|
网管聚合
|
网管读摘
|
网管焦点
|
世界素材
|
会员投稿
|
会员中心
Windows
Linux
Cisco
网络技术
数据库
黑客攻防
DotNet
Java
PHP
认证
新闻资讯
服务器
存储资讯
网络设备
网管学堂
技术专题
焦点
网吧频道
当前位置： >
bitsCN.com
>
网管学堂
>
网页设计
>
Dreamweaver
>
技术教程
> 仿windows选项卡效果连载1
仿windows选项卡效果连载1
2008-01-17 作者:bitsCN整理 来源:中国网管联盟
点评
投稿
收藏
点击下面的运行，可预览代码效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tab Effect Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- a {blr:expression(this.onFocus=this.blur())} body { font-family: "Verdana"; font-size: 10px; } td { font-family: "Verdana"; font-size: 10px; padding:3px; } .qqtable { font-family: "Verdana"; font-size: 10px; padding:0px; } .tabon { background-color: #999999; border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000; color: #000000; font-weight: bold; } .taboff { background-color: #CCCCCC; border: 1px solid #CCCCCC; color: #FFFFFF; } .tdbody { border: 1px solid #000000; line-height:20px; background-color: #ffffff; } a:link { color: #333333; text-decoration: none; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #999900; text-decoration: underline; }.qqbody { border-left: 1px solid #999999; border-right: 1px solid #999999; } --> </style> <script language="JavaScript"> function tabit(id,cid) { tab5d.className="taboff";tabcv.className="taboff";tabbi.className="taboff";id.className="tabon"; c5d.style.display="none";ccv.style.display="none";cbi.style.display="none";cid.style.display="block"; //winname=cid; } function showall() { tab5d.className="tabon";tabcv.className="tabon";tabbi.className="tabon"; c5d.style.display="block";ccv.style.display="block";cbi.style.display="block"; } </script> </head> <body onLoad="tabit(tab5d,c5d)"> <table width="300" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="20" class="taboff" id="tab5d" style="cursor:hand" onClick="tabit(tab5d,c5d)" width="25%">5DMedia</td> <td class="taboff" id="tabcv" style="cursor:hand" onClick="tabit(tabcv,ccv)" width="25%">ChinaVisual</td> <td class="taboff" id="tabbi" style="cursor:hand" onClick="tabit(tabbi,cbi)" width="25%">Bluediea</td> <td width="25%"> </td> </tr> <tr id="c5d" style="display:none"> <td colspan="4" class="tdbody"> <p><strong><br> <img src="http://webdesign.bitscn.com/UploadFiles_8014/200801/20080117140620780.gif" width="88" height="31"><br> <br> 5DMedia</strong><br> <a href="http://www.5dmedia.com">http://www.5dmedia.com</a><br> <a href="http://www.5dmedia.com/bbs">http://www.5dmedia.com/bbs</a> </p> </td> </tr> <tr id="ccv" style="display:none"> <td colspan="4" class="tdbody"><strong><br> <img src="http://webdesign.bitscn.com/UploadFiles_8014/200801/20080117140620605.gif" width="88" height="31"><br> <br> ChinaVisual</strong><br> <a href="http://www.chinavisual.com">http://www.chinavisual.com</a> <br> <a href="http://forum.chinavisual.com">http://forum.chinavisual.com</a> </td> </tr> <tr id="cbi" style="display:none"> <td colspan="4" class="tdbody"><strong><br> <img src="http://webdesign.bitscn.com/UploadFiles_8014/200801/20080117140620168.gif" width="88" height="31"><br> <br> Blueidea</strong><br> <a href="http://www.bluedidea.com">http://www.bluedidea.com</a> <br> <a href="http://www.blueidea.com/bbs">http://www.blueidea.com/bbs</a></td> </tr> </table> <!--<p align="center"><font color="#006600" style="cursor:hand" onClick=showall()><strong>Show All</strong></font></p>--> <p> </p> <p align="center">Powered By <a href="mailto:allinhands@chinavisual.com">Allinhands</a>.QQ:1707477<br> Notice:No Order these sites above!</p>
网管bitscn_com
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
0
顶一下
TAGs
：
上一篇：
一个div里面图片垂直居中的例子
下一篇：
仿windows选项卡效果连载2
相关文章列表
网页设计中为网页指定样式的方法
网页设计中未知高度的非表格垂直对齐
页面中CSS 加载方式的优化
网页设计中实现表格强制换行和强制不换行
提高Web页面的性能
页面中CSS加载方式的优化
IE5 到 IE8 的 CSS 兼容列表
网页设计中关于H1的使用技巧
仿windows选项卡效果连载1 评论：
评论加载中…
评论:
请自觉遵守互联网相关政策法规，评论不得超过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命令基础大全之命令详解<作者吐血
评论加载中…
