双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翻转门技术,翻转门菜单