css综合案例-五彩导航栏：块元素如何设置长宽

最新推荐文章于 2024-03-31 20:57:32 发布

慕慕和小绵羊

最新推荐文章于 2024-03-31 20:57:32 发布

阅读量388

点赞数

分类专栏：前端Vscode 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_46617150/article/details/129200449

版权

前端Vscode 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS实现导航栏在鼠标悬停时背景颜色改变的效果。通过将链接元素设置为inline-block并定义:hover伪类，结合不同的背景图片，创建了不同颜色的导航项，当鼠标移到每个导航项上时，其背景颜色会相应变换。

摘要由CSDN通过智能技术生成

文章目录

实现效果

在这里插入图片描述
当鼠标移到导航栏上时，导航栏的背景颜色发生改变，类似这种：

所用到的css知识

导航栏中的文字是链接，是块内元素，故不可对其进行长和宽的设置。故使用display:inline-block将其转换为行内块。这样，这四个导航栏既可以在同一行展示，并且可以设置长宽。
鼠标移到导航栏，导航栏背景色改变，使用**a:hover：{}**来设置

实现代码

<!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>五彩导航</title>
    <style>
        a {
            text-decoration: none;
            display:inline-block;
            color: white;
            text-align: center;
            line-height: 50px;
        }
        .orange {
            background-image: url(imgs/orange.jpg);
            background-repeat: no-repeat;
            width: 120px;
            height: 60px;
        }
        .orange:hover {
            background-image: url(imgs/red.jpg);
        }
        .blue {
            background-image: url(imgs/blue.jpg);
            background-repeat: no-repeat;
            width: 120px;
            height: 60px;
        }
        .blue:hover {
            background-image: url(imgs/dark_blue.jpg);

        }
        .voilet {
            background-image: url(imgs/violet.jpg);
            background-repeat: no-repeat;
            width: 120px;
            height: 60px;
        }
        .voilet:hover {
            background-image: url(imgs/dark_blue.jpg);
        }
        .lessvoliet {
            background-image: url(imgs/less_violet.jpg);
            background-repeat: no-repeat;
            width: 120px;
            height: 60px;
        }
        .lessvoliet:hover {
            background-image: url(imgs/green.jpg);
        }

    </style>
</head>
<body>
    <a href="#" class="orange">五彩导航</a>
    <a href="#" class="blue">五彩导航</a>
    <a href="#" class="voilet">五彩导航</a>
    <a href="#" class="lessvoliet">五彩导航</a>
    
</body>
</html>