滑动门和翻转门实现的横竖双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 >

keyword:css样式表,滑动门技术,滑动门效果,css滑动门,滑动门代码,史丹利滑动门,css滑动门技术,滑动门菜单,翻转门技术,翻转门效果,css翻转门,翻转门代码,css翻转门技术,翻转门菜单