仿网易云音乐导航栏

可以自己手动实验这些效果哦~

:link 选择所有未被访问的链接 a:link；

:visited 选择所有已被访问的链接 a:visited；

:active 选择活动链接 a:active；

:hover 选择鼠标指针位于其上的链接 a:hover；

注意：a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

text-decoration:none; 去除文字装饰（消除超链接的下划线）；

list-style: none; 去除列表项前的装饰。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style>
    *{
        margin:0;padding:0;
    }
    .nav{
        list-style: none;
        width:700px;
        margin:40px auto;
        overflow: hidden;
        font-size: 20px;
    }
    .nav li{
        float:left;width:20%;    
    }
    .nav a{
        display:block;
        border-bottom: 3px solid #aaa;
        text-align: center;
        color:#000;padding:5px;
        text-decoration:none;font-weight: 400;
        font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    .nav a:visited {
        color:#c00;border-bottom: 2px solid #d00;
    }
    .nav a:hover{
        background: #a00;color:#fff;
    }
    .nav a:active{
        color:#000;background: #d00;
    }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="https://music.163.com/#/discover" target="_blank">个性推荐</a></li>
        <li><a href="https://music.163.com/#/discover/playlist" target="_blank">歌单</a></li>
        <li><a href="https://music.163.com/#/discover/artist" target="_blank">主播</a></li>
        <li><a href="https://music.163.com/#/discover/toplist" target="_blank">排行榜</a></li>
        <li><a href="https://music.163.com/#/discover/album" target="_blank">歌手</a></li>
    </ul>
</body>
</html>