仿网易云音乐导航栏

仿网易云音乐导航栏

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

 

: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>navtitle>
    <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>

 

你可能感兴趣的:(仿网易云音乐导航栏)