仿网易云音乐导航栏
可以自己手动实验这些效果哦~
: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>