div+CSS 引き戸特殊効果_html/css_WEB-ITnose

滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“

滑动门

”、“

第五层内容

" これら 2 つを削除した場合、正常に表示するには、JS 特殊効果の m05、mm05、mmm05 と c05、cc05、ccc05 も削除する必要があります。

margin:0px;
padding:0px;
font-size:12px;
}
ul, li {
margin:0px;
padding:0px;
}
li {
list-style-type:none;

h1 {
マージン:10px;
ボーダーボトム: 1px 点線
}
パディング:10px;
ディスプレイ:none;
.scrolldoorFrame {
width:400px;
border-bottom:1px;
height: 35px;
.scrollUl li {
背景色: #f6f6f6;
テキスト整列: 中央;
ボーダー: 1px ボーダー-top -width:0px;
.sd01 {
カーソル:1px ソリッド #CCC;
余白:2px;
.sd02 {
カーソル:ポインター;
マージン: 5px;


#tab01 {
位置: 相対;
ボーダー: ソリッド #
ボーダー幅:0 1px 1px;
ライン高さ:18px;
ボーダー幅:1px 0; -1px ;
背景:#f6f6f6;
#tab01 h4.up {
color:#c00;
高さ:54px;
カラー:#666;
#tab01 {
位置:相対; 02 h3 {
位置: 相対;
高さ: 16px;
ボーダー: ソリッド #ccc; ;
テキスト整列:中央;
背景:#eee;
#tab02 h3.up {
色:#c00; :# fff;
#tab02 div.tab {
位置: 絶対;
z-index:2;
高さ: 200 ピクセル;
パディング:5px;
ボーダー:ソリッド1px #ccc;
#tab02 div.tab.up {
ディスプレイ:ブロック;

-->

 

     

         
• 滑动门

         
• 滑动门

         
• 滑动门

         
• 滑动门

         
• 滑动门

     

     

         

第一层内容

         

第二层内容

         

第三层内容

         

第四层内容

         

第五层内容

     

 

 

首页

 

     
1. 嘿嘿，无视容器原始class值。

 

 

测试

 

     
1. 继续无视h3原始class值。

 

 

无聊

 

     
1. h3没有值也可以～

 

 

傻蛋

 

     
1. div没有值一样可以～

 

 

首页

 

     

嘿嘿，无视h3原始class值。

 

 

测试

 

     

继续无视div原始class值。

 

 

无聊

 

     

h3没有值也可以～

 

 

傻蛋

 

     

class值相似一样也可以～

     

         

指定class后，即时再多一个div也行。