导航栏练习

最新推荐文章于 2024-08-23 09:47:04 发布

The_last_knight

最新推荐文章于 2024-08-23 09:47:04 发布

阅读量398

点赞数

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/The_last_knight/article/details/86550851

版权

Web开发专栏收录该内容

54 篇文章 3 订阅

订阅专栏

导航栏练习

现在我们要做一个导航栏，其最终效果如下

我们要求导航栏的布局居中显示，并且其内的文字也要居中对齐。并且当鼠标放在网站导航上，其背景图片发生变换。

首先第一步便是显示着六个链接，如下

<div class="nav">
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
</div>

效果如下:

第二步，取消下划线，并且设置字体颜色为白色，并且添加背景图片，由于链接标签a是行内标签，其大小不可以改变，为了使添加的背景图片吻合，还需要改变其显示模式为display: inline-block,然后设置其宽高属性为图片宽高的大小。如下:

.nav a {
    text-decoration: none; /*取消下划线*/
    color: #FFF; /*设置字体颜色为白色*/
    display: inline-block;
    width: 120px;
    height: 50px;
    background-image: url(bg.png);
}

在这里，为了只影响导航栏的链接标签，这里我们用了后代选择器。

效果如下:

这个时候我们发现导航栏没有居中对齐，并且里面的文字没有居中对齐

.nav {
    text-align: center;
}

我们设置.nav类里的文字居中对齐，但是div里面的是链接，text-align属性还有用吗？答案是可以，链接在块类标签里面可以当做是文字处理，这是一个知识点，记住了。

效果如下：

我们发现导航栏居中对齐了

现在我们需要将链接里面的文字水平居中对齐和垂直居中对齐，在.nav a加入如下

text-align: center;
line-height: 50px;  /*当行高等于标签设置的高度时，会使文字垂直居中对齐*/

效果如下

现在最后一步就是将鼠标放上去，背景图片改变，我们使用伪类hover,如下

.nav a:hover {
    background-image: url("bgc.png");
}

这里为了只对导航栏的链接生效，这里也用了后代选择器，效果如下:

到这里我们已经完整的实现了导航栏的案例，下面贴出完整的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏案例</title>
    <style>
        .nav a {
            text-decoration: none; /*取消下划线*/
            color: #FFF; /*设置字体颜色为白色*/
            display: inline-block;
            width: 120px;
            height: 50px;
            background-image: url(bg.png);
            text-align: center;
            line-height: 50px;
        }

        .nav a:hover {
            background-image: url("bgc.png");
        }

        .nav {
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="nav">
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
    </div>
</body>
</html>