前端学习---CSS案例---五彩导航栏

叶言-ne

于 2021-10-11 20:37:46 发布

阅读量389

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： css html html5

本文链接：https://blog.csdn.net/ketemstion/article/details/120711274

前端学习笔记专栏收录该内容

29 篇文章

订阅专栏

本文将介绍如何使用CSS来实现一个充满活力的五彩导航栏，涵盖HTML结构设计与CSS样式设置，包括颜色搭配、hover效果及响应式布局，帮助前端初学者提升CSS实践能力。

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

 <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;

            background-color: pink;
            text-align: center;
            line-height: 58px;
            color: black;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(底部导航栏-13.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(导航栏_控制台icon_选中.png);
        }
    </style>

</head>

<body>
    <div class="nav">

        <a href="#" class="bg1">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>


</body>

在这里插入图片描述