本人想开设一个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>`元素的外观和行为,这样一来我们的导航栏更美观了，效果如下
当我们用鼠标箭头指向导航栏时效果如下
感谢您的观看！！！
若有不足评论区交流
标签：background,color,标签,元素,padding,ul,nav,设置,内边 From： https://blog.csdn.net/weixin_46253800/article/details/137090679