CSS五彩导航

最新推荐文章于 2024-03-14 12:40:51 发布

码代码的小涛

最新推荐文章于 2024-03-14 12:40:51 发布

阅读量301

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_58425326/article/details/130876917

版权

该文章展示了如何使用CSS将a标签设置为行内块元素，并通过修改背景图片实现鼠标悬停时的效果切换。主要技巧包括设置width、height、background-color、text-align和line-height等属性，以及使用:hover伪类选择器来改变悬停时的背景图片。

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

效果图见下：
在这里插入图片描述
具体实现思路：

先写两个空连接标签<a href:“#”>,但a是行内元素，如果想实现上述效果，必然要使用行内块display：inline-block，在css中设置
之后就是a标签的width height 背景色，以及文字颜色color，下划线去除 text-decoration，文字垂直居中text-algin和line-height
这样来我们实现的只有文字和盒子，还没有达到上述效果，要想实现，还要向各个a标签用background：添加图片，然后再用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>Document</title>
    <style>
        a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            color: #fff9ff;
            text-decoration: none;
            text-align: center;
            line-height: 48px;
        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }
    </style>
</head>

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

</html>