类似雅虎站的CSS滑动门切换_网页代码站(www.webdm.cn)

 

<! 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 >
< title > 类似雅虎站的CSS滑动门切换_网页代码站(www.webdm.cn) </ title >
< style type ="text/css" >
<!--
* { margin : 0 ; padding : 0 }
div, dl, dt, dd { display : inline-block ; }
div, dl, dt, dd { display : block }
h2 { font : 800 12px/20px "宋体" ; }
#tabs { border : 1px solid #ccc ; margin : 40px ; width : 382px ; padding : 4px 0 }
#tabs div { padding : 69px 4px 0px ; position : relative ; }
#tabs dt { text-align : center ; font : 12px/60px "宋体" ; }
#tabs dd { font : 12px/20px "宋体" ; padding : 10px ; }
#tab1 dt { left : 4px ; top : 4px }
#tab2 dt { left : 130px ; top : 4px }
#tab3 dt { left : 256px ; top : 4px }
#tab4 dt { left : 4px ; top : 4px }
#tab5 dt { left : 130px ; top : 4px }
#tab6 dt { left : 256px ; top : 4px }
.close dt { height : 60px ; width : 120px ; background : #FAFAFA ; position : absolute ; border : 1px solid #ccc }
.close dd { display : none }
.open dt { height : 65px ; width : 120px ; background : #EBEBEB ; position : absolute ; border : 1px solid #ccc ; border-bottom : none ; }
.open dd { background : #EBEBEB ; border : 1px solid #ccc ; }
-->
</ style >
< script type ="text/javascript" >
window.onload =
function (){
alltabs = document.getElementById( ' tabs ' ).getElementsByTagName( ' dl ' )
for (i = 0 ; i < alltabs.length; i ++ ){
alltabs[i].className = " close "
alltabs[i].onmouseover = function (){
for (j = 0 ; j < alltabs.length; j ++ ){
alltabs[j].className = " close "
}
this .className = " open "
}
}
}
</ script >
</ head >
< body >
< div id ="tabs" >
< h2 > ·欢迎来到网页代码站 </ h2 >
< div >
< dl id ="tab1" >
< dt > 今日更新 </ dt >
< dd > 1、今日更新的内容 </ dd >
</ dl >
< dl id ="tab2" >
< dt > 今日排行 </ dt >
< dd > 2、今日排行的内容 </ dd >
</ dl >
< dl id ="tab3" >
< dt > 今日推荐 </ dt >
< dd > 3、今日推荐的内容 </ dd >
</ dl >
</ div >
< div >
< dl id ="tab4" >
< dt > 最近下载 </ dt >
< dd > 4、最近下载的东西 </ dd >
</ dl >
< dl id ="tab5" >
< dt > 源码总排行 </ dt >
< dd > 5、源码总排行的内容 </ dd >
</ dl >
< dl id ="tab6" >
< dt > 网页特效 </ dt >
< dd > 6、精品网页特效的内容 </ dd >
</ dl >
</ div >
</ div >
</ body >
</ html >
< br >
< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/e9cb72b2-9c62-44fd-833d-bda94674aa23.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/01/04/1925147.html