在互联网上你看到的任何网站上几乎都可以找到导航栏，本文将学习如何编写网站导航代码和样式！
html导航栏最终效果
下面是html导航栏课程将要手把手教做：
你可以下载html导航栏代码跟着下面教程一步步操作。
术语
出于本文的目的，导航栏（nav-bar）与标题（header）相同。 在本文中我将使用术语“导航栏”，但要知道它们基本相同。
html导航栏入门
我建议按照教程进行操作，确实可以帮助你更快地学习和掌握概念。特别是在教程中一起编写代码学起来会很有趣。
首先创建一个新项目的文件夹（navbar），创建空白的index.html和style.css文件，让我们开始填满它们！
编写html
编写HTML是任何网站的开始，将以下内容添加到index.html文件中：
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Navigation bar DEMO</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<img src="./images/logo.png">
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">价格</a></li>
<li><a href="#">条款</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<p>文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里，文本内容放在这里……</p>
</main>
</body>
</html>在body主体内部，我们有标题和导航元素。如果你不熟悉HTML导航栏的这种结构请查看列表。在标题下方，我们在<main>元素内有一些文本，我们可以看到本教程后面将出现的问题。在浏览器中打开index.html文件应如下所示：
请注意，除非我们缩小图像否则我们可能必须向下滚动，因为我们的图像很大！
时间到了我们的CSS…
编写CSS
首先我们的标志太大了，让我们将其缩小到80像素的高度，这就是我们的导航栏的高度。将以下内容添加到你的style.css文件中：
header img {
height: 40px;
}效果：
接下来，让我们设置样式看到发生了什么。首先我们希望能够滚动，我们可以通过将高度设置为125vh（视口高度）来进行滚动。我们希望能够看到何时向下滚动，可以通过添加背景图像来做到这一点。 让我们将字体设置为sans-serif，这样看起来比较舒服些，这是CSS：
body{
height:125vh;
background-image:url(https://www.yweny.com/wp-content/uploads/2020/02/2020-02-05-081557.jpg);
background-size:cover;
font-family:sans-serif;
}让我们为<main>添加一种颜色，以便我们能够清晰地看到字体：
main {
color: white;
}这里是所有显示效果：
不必担心链接的颜色，因为我们以后无论如何都会更改链接样式。
定位导航栏
现在我们的网站看起来还不错，但是我们的导航栏不行！它仍然看起来像一个列表，每当你创建导航栏时必须具有特定的结构。这是因为网络爬虫更易于浏览，而且Google也会喜欢。
首先让我们开始放置实际的<header>元素，我们还希望为其提供背景色以便我们可以看到其位置。让我们添加一些样式！
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}这里我们使用position：fixed定位<header>元素。 然后我们还将高度设置为80px。
显示如下：
是的，我们的页眉/导航栏现在已定位！ 但是<main>文本已被遮盖，现在导航栏的位置是固定的，页面上的其余内容将向上移动。这意味着主要文本实际上在我们的导航栏下面！要解决此问题，我们只需要在正文设置一个等于导航栏高度80px的空白边距即可：
body{
height:125vh;
background-image:url(https://www.yweny.com/wp-content/uploads/2020/02/2020-02-05-081557.jpg);
background-size:cover;
font-family:sans-serif;
margin-top: 80px;
}效果显示：
唯一的是现在文本正好位于导航栏的底部，让我们通过body标签添加padding: 30px;CSS代码来解决它。以下是正文可视化的边距和填充：
边距为橙色，填充为绿色，主体的主要部分为蓝色。恭喜，现在我们的页面已经可以正常使用了！ 但是<header>中的内容与文本的其余部分重叠看起来很糟。
样式化导航栏的内容
现在让我们将导航项目放置在导航栏中，首先我们要使项目水平放置而不是垂直放置。我们可以使用display:inline：
header * {
display: inline;
}在这里，我们使用选择器标题*。 *是通配符，可以表示任何元素。 因此header *基本上是指header中的任何元素。 另外请注意，当我们使用display:inline时，项目符号要消失。项目符号出现在第一位的原因是<li>，默认情况下<li>元素具有列表项的显示类型。 因此当我们覆盖它并将其更改为内联时，项目符号消失。
但是我们的链接现在转到导航栏的底部！ 为<header>元素提供flex属性，可以使它们位于导航栏的顶部：
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
}
但是文本仍未与导航栏的中间垂直对齐。我们可以使用align-items:center在导航栏中垂直对齐项目。如果你不了解display:flex或align-items:center，请查看flexbox教程。这是CSS：
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
但是，导航栏中的所有链接都被压缩在一起，我们可以通过给它们提供margin属性来将它们隔开更多：
header li {
margin: 20px;
}
现在我们的导航栏项目已定位，该给它们一些样式了！我们要删除默认链接样式，所以继续把颜色设置为黑色，将文本样式设置为无（正常情况下会带有下划线）。 这是CSS：
header li a {
color: black;
text-decoration: none;
}
我们现在处于最后阶段！ 我们的标识看起来有点怪异，所以让我们通过添加左边距来固定位置！ 这是CSS：
header img {
height: 80px;
margin-left: 40px;
}接下来我们将在导航栏中添加阴影。CSS有其自己的制作阴影有多种方法！ 在另一篇文章中我将更深入地介绍所有不同类型的CSS阴影。我们将使用box-shadow属性在元素周围创建一个矩形阴影。
这是box-shadow属性的语法：
x-offset和y-offset偏移量是阴影向侧面和上/下的距离，模糊（blur）是阴影的模糊程度，散布（spread）是阴影从元素散布的距离。除了模糊以外所有这些值都可以为负。 然后我们获得了希望阴影成为的颜色。让我们在导航栏上添加一个非常简单（但有效）的阴影：
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}如上代码我们实际上只在这里使用模糊，我们将其余的值（x偏移，y偏移和散布）设置为0，显示效果如下：
我们的导航栏现在有阴影！！
html导航栏总结
希望你从本文中学到很多东西！ 现在你可以继续制作自己的导航栏，你访问的几乎每个网站都在使用它们，因此了解如何html导航栏编码是非常重要。
将来，我将撰写有关如何设置响应式导航栏样式的教程，这意味着它将适应不同的屏幕尺寸（例如，在移动设备上显示“菜单”图标）。
转载请注明：林雍岷 » 12. html导航栏