網易雲導航欄
阿新 • • 發佈:2020-08-14
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; }ul { list-style: none; } a { text-decoration: none; color: #ccc; } .top-nav { width: 100%; height: 70px; background-color: #242424; } .top-nav ul { padding-left: 100px; } .top-nav ul li { /* 並排 */ display: inline-block; } .black { background-color: #000; } .top-nav li:hover { background-color: #000; } /* 滑鼠移入li元素 選擇li的後代a元素 */ .top-nav li:hover a{ color:#fff; } .top-nav li a { /* 行內---》塊 設定寬高 */ display: block; padding: 0px 20px; line-height: 70px; } </style> </head> <body> <div class="top-nav"> <ul> <li class="black"><a href="">發現音樂</a></li> <li><a href="">我的音樂</a></li> <li><a href="">朋友</a></li> <li><a href="">商城</a></li> <li><a href="">音樂人</a></li> <li><a href="">下載客戶端</a></li> </ul> </div> </body> </html>