五彩导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            background-repeat: no-repeat;
            text-decoration: none;
            display: inline-block;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 45px;
        }    
        /* 第一个五彩 */
.a{
background-image: url(./images/bg1.png);
width: 120px;
height: 58px;
}
.a:hover{
    background-image: url(./images/bg5.png);
}
        /* 第二个五彩 */
        .b{
background-image: url(./images/bg2.png);
width: 120px;
height: 58px;
}
.b:hover{
    background-image: url(./images/bg6.png);
}

        /* 第三个五彩 */

        .c{
background-image: url(./images/bg3.png);
width: 120px;
height: 58px;
}
.c:hover{
    background-image: url(./images/bg7.png);
}

        /* 第四个五彩 */
        .d{
background-image: url(./images/bg4.png);
width: 120px;
height: 58px;
}
.d:hover{
    background-image: url(./images/bg8.png);
}
    </style>
</head>
<body> 
    <a href="#" class="a">五彩导航</a>
    <a href="#" class="b">五彩导航</a>
    <a href="#" class="c">五彩导航</a>
    <a href="#" class="d">五彩导航</a>
</body>
</html>
enter description here
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏 分享
评论 抢沙发

请登录后发表评论