在互联网上你看到的任何网站上几乎都可以找到导航栏,本文将学习如何编写网站导航代码和样式!
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导航栏