ホームページ > ウェブフロントエンド > htmlチュートリアル > div+CSS 引き戸特殊効果_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 12:30:31
オリジナル
1751 人が閲覧しました

滑动门是一种只需要鼠标悬停便可自动切换板块的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值。

    2.  

     

    测试


     

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

    2.  

     

    无聊


     

           
    1. h3没有值也可以~

    2.  

     

    傻蛋


     

           
    1. div没有值一样可以~

    2.  





     

    首页


     

         

    嘿嘿,无视h3原始class值。


     

     

    测试


     

         

    继续无视div原始class值。


     

     

    无聊


     

         

    h3没有值也可以~


     

     

    傻蛋


     

         

    class值相似一样也可以~


         

             

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


         

     







    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート