Heim > Artikel > Web-Frontend > JS implementiert eine vertikale Sekundärnavigation, die die Javascript-Fähigkeiten von Jingdong Taobao imitiert
JS implementiert eine vertikale Sekundärnavigation, die die Javascript-Fähigkeiten von Jingdong Taobao imitiert
- WBOYOriginal
- 2016-05-16 16:28:221935Durchsuche
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;