JS implementiert eine vertikale Sekundärnavigation, die die Javascript-Fähigkeiten von Jingdong Taobao imitiert-js-Tutorial-php.cn

JS implementiert eine vertikale Sekundärnavigation, die die Javascript-Fähigkeiten von Jingdong Taobao imitiert

WBOY

Freigeben： 2016-05-16 16:28:22

Original

1934 Leute haben es durchsucht

Der Code ist sehr einfach, deshalb werde ich nicht zu viel Unsinn machen und Ihnen einfach den Code geben:

Code kopieren Der Code lautet wie folgt:

    *{
        Schriftfamilie:Microsoft YaHei;
        Rand:0;
        Polsterung:0;
    }
    body{width:100%;}
    ul{list-style: none;}
    a{text-decoration: none;}
    #header{
        Höhe:50px;
        Zeilenhöhe:50px;
        Hintergrund:#455A6E;
    }
    #header h2,#header h3{
        Schriftstärke:500;
    }
    #header h2{
        Farbe:#fff;
        Schriftgröße:18px;
        Breite:180px;
        text-align: center;
        Hintergrund:#0D2E49;
    }
    #header h3{color:#fff;font-size:16px;}
    .mycenter{
        Breite:900px;
        margin:0 auto;
    }
    #header div.mycenter{
        /*相对定位*/
        position:relativ;
    }
    #nav {
        Breite:180px;
        Hintergrund:rgba(0, 102, 173, 0.5);
        z-index:999;
    }
    #nav li{
        Höhe:40px;
        padding-left:40px;
        Zeilenhöhe: 40px;
        position:relativ;
    }
    #nav h3{height:40px;}
    #nav li dl{
        position:relativ;
        links:140px;
        top:-40px;
        Breite:150px;
        Hintergrund:#fff;
        display:none;
        Polsterung:8px 10px;
    }
    #nav dt{
        Breite:150px;
        Zeilenhöhe: 30px;
        Höhe:30px;
        Hintergrund:#36C1AF;
        Farbe:#fff;
        text-align: center;
    }
    #nav dd a{
        display:block;
        Höhe:30px;
        Breite:150px;
          Schriftgröße:14px;
        Farbe:#858585;
}
#nav dd a:hover{
         text-decoration: underline;
}
#content{
Hintergrund:#E95200;
Höhe:500px;
}

& Lt; h2 & gt; Hintergrundverwaltungsmenü & lt;/h2 & gt;