1. 程式人生 > 實用技巧 >網易雲導航欄

網易雲導航欄

程式碼:

<!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>