不用ul列表标签，用nav标签做出简洁导航栏

最新推荐文章于 2024-05-06 17:21:38 发布

阿征学IT

最新推荐文章于 2024-05-06 17:21:38 发布

阅读量1.1k

点赞数 39

分类专栏： WEB前端文章标签：前端开发语言 html5 css3

本文链接：https://blog.csdn.net/weixin_46253800/article/details/137090679

版权

WEB前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本人想开设一个minecraft服务器，正想着为我的游戏服务器写一个网页，加上今天上完web课有所感想写了这篇博客。

在大学的web教材当中，都是用ul标签来做导航来(这么说是因为我们的教材就是教我们用ul标签来做而且不怎么好看)，那么今天阿征教大家如何不用列表也能做出导航栏。

效果正如上图所示

一、首先我们先搭好地基，把基本东西写好

    <header class="title">
        <h1>HELLO!!!!</h1>
    </header>
    <nav class="shanglan">
        <a class="a" href="start.html">首页</a>
        <a href="b.html">关于我们</a>
        <a href="c.html">下载</a>
        <a href="d.html">联系我们</a>
        <a onclick="rule()">服务器规则</a>
        <a onclick="play()">玩法</a>
    </nav>

在body标签中塞入上述内容，把超链接写在nav标签里。

类名是瞎起的。

写好之后，效果如上图所示

二、给我们写的东西化妆

接下来我们就得给这个导航栏化妆了

在style标签中（或者css中输入以下代码）

display: flex：将元素的布局设置为弹性盒子（Flexbox），使其子元素按照弹性布局进行排列。
justify-content: space-around：在主轴上，子元素之间以及首尾元素与容器边缘之间都留有等间距的空间。
background-color: #444：设置背景颜色为十六进制值#444，即深灰色。
padding: 10px：设置内边距为10像素，使子元素与容器边缘之间有一定的间距。

通过应用这个样式规则，可以将具有"shanglan"类的元素设置为弹性布局，并在其中平均分布子元素，同时具有深灰色的背景和一定的内边距。

代码如下：

        .shanglan {
            display: flex;
            justify-content: space-around;
            background-color: #444;
            padding: 10px;
        }

便可得到以上效果，但是，也很丑陋啊，不过没关系我们接着给它化妆

background-color: #333：设置背景颜色为十六进制值#333，即深灰色。
color: #fff：设置文本颜色为十六进制值#fff，即白色。
padding: 5px：设置内边距为5像素，使文本与容器边缘之间有一定的间距。
text-align: center：将文本内容居中对齐。

通过应用这个样式规则，可以将具有"title"类的元素设置为深灰色的背景，白色的文本，并在其中居中对齐文本内容，同时具有一定的内边距。

代码如下：


        .title {
            background-color: #333;
            color: #fff;
            padding: 5px;
            text-align: center;
        }

现在我们的导航栏更美观了！

接下来我们一布到位吧

输入以下css代码

        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 5px;
        }

        nav a:hover {
            background-color: #555;
            border-radius: 5px;
        }

我来解释以下,

这段代码是一个CSS样式规则，用于定义网页中的元素样式。下面是对这段代码的解析：

body：选择器选择了整个网页的`<body>`元素。
font-family: Arial, sans-serif;`：设置字体为Arial，如果Arial不可用，则使用其他无衬线字体。
background-color: #f5f5f5;`：设置背景颜色为十六进制值#f5f5f5，即浅灰色。
margin: 0;`：设置外边距为0，消除默认的外边距。
padding: 0;`：设置内边距为0，消除默认的内边距。

nav a：选择器选择了`<nav>`元素内的`<a>`元素。
color: #fff;`：设置文本颜色为十六进制值#fff，即白色。
text-decoration: none;`：去除链接的下划线装饰。
padding: 5px;：设置内边距为5像素，使链接有一定的间距。

nav a:hover：选择器选择了鼠标悬停在`<nav>`元素内的`<a>`元素上时的样式。
background-color: #555：设置背景颜色为十六进制值#555，即深灰色。
border-radius: 5px：设置边框圆角为5像素，使链接在鼠标悬停时呈现圆角效果。

通过应用这些样式规则，可以设置网页中的`<body>`、`<nav>`和`<a>`元素的外观和行为,这样一来我们的导航栏更美观了，效果如下