滑动门和翻转门实现的横竖双tab标签测试页面（附源码）
双tab可以用来表现二维数据的某一个单元。所以很多情况下还是比较有用的。但是很少人用这个而已。人们少用的原因比较多。反正我是比较少见的。
此版本至少测试版，只有IE6下进行了测试。FF和IE7一定会有问题的。所以还要使用一些css hack的技巧（可以参看：http://www.cnblogs.com/JustinYoung/archive/2007/09/14/892414.html）
不多说，横向的延伸用的是滑动门技术，鼠标移上去变色用的是翻转门技术。什么这门，那门的，好像很神秘的样子，其实看看代码就知道了，也不是很难的，只是个名称而已。我还停不喜欢这些叫法的，因为把一些其实很简单的东西都叫复杂了。就像“黑话”一样。难道把一些门外面的人都忽悠晕了，自己就变成了高手吗？
源码下载(点击下发图片下载)：
下面是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
#container{
background-color:#333;
border:1px dotted green;
width:800px;
margin:10px auto;
padding-bottom:10px;
}
.jui-dirBr{
clear:both;
}
.divTab{
width:620px;
background-color:#fff;
min-height:240px;
_height:240px;
padding:10px;
}
/*- Menu Tabs--------------------------- */
.tabs {
margin:0;
width:800px;
font-size:93%;
line-height:normal;
height:31px;
float:left;
}
.tabs ul {
margin:0;
padding:10px 10px 0 180px;
list-style:none;
}
.tabs li {
display:inline;
margin:0;
padding:0;
}
.tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs a span {float:none;}
/* End IE5-Mac hack */
.tabs a:hover span {
color:#FF9834;
}
.tabs a:hover {
background-position:0% -42px;
}
.tabs a:hover span {
background-position:100% -42px;
}
.tabs .selected {
background-position:0% -42px;
cursor:default;
}
.tabs .selected span{
background-position:100% -42px;
color:#FF9834;
}
/******************************/
.tabs-v {
width:150px;
font-size:93%;
line-height:normal;
float:left;
_position:relative;
_left:3px;
}
.tabs-v ul {
margin:0;
padding:30px 0 10px 10px;
list-style:none;
}
.tabs-v li {
margin:0 0 2px 0;
padding:0;
}
.tabs-v a {
background:url("tableftH_V.gif") no-repeat left top;
margin:0;
display:block;
width:100%;
text-decoration:none;
}
.tabs-v a span {
display:block;
background:url("tabrightH_V.gif") no-repeat right top;
padding:7px 0px 7px 5px;
margin-left:3px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs-v a span {float:none;}
/* End IE5-Mac hack */
.tabs-v a:hover span {
color:#FF9834;
}
.tabs-v a:hover {
background-position:0% -26px;
}
.tabs-v a:hover span {
background-position:100% -26px;
}
.tabs-v .selected {
background-position: 0% -26px;
cursor:default;
}
.tabs-v .selected span{
background-position: 100% -26px;
color:#FF9834;
}
</style>
</head>
<body>
<div id="container">
<div class="tabs">
<ul>
<li><a href="#" title="Link 1" ><span>Link 1</span></a></li>
<li><a href="#" title="Link 2" class="selected"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
<div class="tabs-v">
<ul>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3" class="selected"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
<div class="divTab">
<p>横竖双tab标签。FF需要再调整。IE6测试通过。</p>
<a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div><!--end: divTab -->
</div><!--end: container -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!" />
<meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
<title>CSS/Javascript demo</title>
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
#container{
background-color:#333;
border:1px dotted green;
width:800px;
margin:10px auto;
padding-bottom:10px;
}
.jui-dirBr{
clear:both;
}
.divTab{
width:620px;
background-color:#fff;
min-height:240px;
_height:240px;
padding:10px;
}
/*- Menu Tabs--------------------------- */
.tabs {
margin:0;
width:800px;
font-size:93%;
line-height:normal;
height:31px;
float:left;
}
.tabs ul {
margin:0;
padding:10px 10px 0 180px;
list-style:none;
}
.tabs li {
display:inline;
margin:0;
padding:0;
}
.tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs a span {float:none;}
/* End IE5-Mac hack */
.tabs a:hover span {
color:#FF9834;
}
.tabs a:hover {
background-position:0% -42px;
}
.tabs a:hover span {
background-position:100% -42px;
}
.tabs .selected {
background-position:0% -42px;
cursor:default;
}
.tabs .selected span{
background-position:100% -42px;
color:#FF9834;
}
/******************************/
.tabs-v {
width:150px;
font-size:93%;
line-height:normal;
float:left;
_position:relative;
_left:3px;
}
.tabs-v ul {
margin:0;
padding:30px 0 10px 10px;
list-style:none;
}
.tabs-v li {
margin:0 0 2px 0;
padding:0;
}
.tabs-v a {
background:url("tableftH_V.gif") no-repeat left top;
margin:0;
display:block;
width:100%;
text-decoration:none;
}
.tabs-v a span {
display:block;
background:url("tabrightH_V.gif") no-repeat right top;
padding:7px 0px 7px 5px;
margin-left:3px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs-v a span {float:none;}
/* End IE5-Mac hack */
.tabs-v a:hover span {
color:#FF9834;
}
.tabs-v a:hover {
background-position:0% -26px;
}
.tabs-v a:hover span {
background-position:100% -26px;
}
.tabs-v .selected {
background-position: 0% -26px;
cursor:default;
}
.tabs-v .selected span{
background-position: 100% -26px;
color:#FF9834;
}
</style>
</head>
<body>
<div id="container">
<div class="tabs">
<ul>
<li><a href="#" title="Link 1" ><span>Link 1</span></a></li>
<li><a href="#" title="Link 2" class="selected"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
<div class="tabs-v">
<ul>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3" class="selected"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
</ul>
</div>
<div class="divTab">
<p>横竖双tab标签。FF需要再调整。IE6测试通过。</p>
<a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div><!--end: divTab -->
</div><!--end: container -->
</body>
</html>
keyword:css样式表,滑动门技术,滑动门效果,css滑动门,滑动门代码,史丹利滑动门,css滑动门技术,滑动门菜单,翻转门技术,翻转门效果,css翻转门,翻转门代码,css翻转门技术,翻转门菜单
