前端五彩导航栏案例 html和css简单使用-CSDN博客

本文链接：https://blog.csdn.net/m0_55038051/article/details/129582311

该代码示例展示了如何使用HTML和CSS创建一组带有不同背景图片的链接按钮，点击后背景图片会改变，呈现悬浮效果。通过调整类名和设置图片URL，可以定制不同的按钮样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整体效果

点击前：

点击后：

1.html和css部分

<!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>
</head>
<style>
    a {
        display: inline-block;
        background-color: pink;
        text-decoration: none;
        text-align: center;
        line-height: 100px;
    }
    
    .nav .tong {
        background: no-repeat;
    }
    
    .nav .bg1 {
        width: 219px;
        height: 112px;
        background: url(bg1.png) no-repeat;
    }
    
    .nav .bg2 {
        width: 224px;
        height: 117px;
        background: url(bg2.png);
    }
    
    .nav .bg3 {
        width: 217px;
        height: 110px;
        background: url(bg3.png);
    }
    
    .nav .bg4 {
        width: 214px;
        height: 108px;
        background: url(bg4.png);
    }
    
    .nav .tong:hover {
        background: url(bg5.png) no-repeat;
        width: 173px;
        height: 86px;
    }
</style>

<body>
    <div class="nav">
        <a href="#" class="bg1 tong"></a>
        <a href="#" class="bg2 tong"></a>
        <a href="#" class="bg3 tong"></a>
        <a href="#" class="bg4 tong"></a>
    </div>

</body>

</html>

所需要的图片：

bg1.png