最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

12. html导航栏

HTML语言学习 林雍岷 180浏览

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

html导航栏最终效果

下面是html导航栏课程将要手把手教做:

12. 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文件应如下所示:

12. html导航栏 html导航栏

请注意,除非我们缩小图像否则我们可能必须向下滚动,因为我们的图像很大!

时间到了我们的CSS…

编写CSS

首先我们的标志太大了,让我们将其缩小到80像素的高度,这就是我们的导航栏的高度。将以下内容添加到你的style.css文件中:

header img {
    height: 40px;
}

效果:

12. html导航栏 html导航栏

接下来,让我们设置样式看到发生了什么。首先我们希望能够滚动,我们可以通过将高度设置为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;
}

这里是所有显示效果:

12. html导航栏 html导航栏

不必担心链接的颜色,因为我们以后无论如何都会更改链接样式。

定位导航栏

现在我们的网站看起来还不错,但是我们的导航栏不行!它仍然看起来像一个列表,每当你创建导航栏时必须具有特定的结构。这是因为网络爬虫更易于浏览,而且Google也会喜欢。

首先让我们开始放置实际的<header>元素,我们还希望为其提供背景色以便我们可以看到其位置。让我们添加一些样式!

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

这里我们使用position:fixed定位<header>元素。 然后我们还将高度设置为80px。

显示如下:

12. html导航栏 html导航栏

是的,我们的页眉/导航栏现在已定位! 但是<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;
}

效果显示:

12. html导航栏 html导航栏

唯一的是现在文本正好位于导航栏的底部,让我们通过body标签添加padding: 30px;CSS代码来解决它。以下是正文可视化的边距和填充:

12. html导航栏 html导航栏

边距为橙色,填充为绿色,主体的主要部分为蓝色。恭喜,现在我们的页面已经可以正常使用了! 但是<header>中的内容与文本的其余部分重叠看起来很糟。

样式化导航栏的内容

现在让我们将导航项目放置在导航栏中,首先我们要使项目水平放置而不是垂直放置。我们可以使用display:inline:

header * {
    display: inline;
}

在这里,我们使用选择器标题*。 *是通配符,可以表示任何元素。 因此header *基本上是指header中的任何元素。 另外请注意,当我们使用display:inline时,项目符号要消失。项目符号出现在第一位的原因是<li>,默认情况下<li>元素具有列表项的显示类型。 因此当我们覆盖它并将其更改为内联时,项目符号消失。

12. html导航栏 html导航栏

但是我们的链接现在转到导航栏的底部! 为<header>元素提供flex属性,可以使它们位于导航栏的顶部:

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
}
12. html导航栏 html导航栏

但是文本仍未与导航栏的中间垂直对齐。我们可以使用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;
}
12. html导航栏 html导航栏

但是,导航栏中的所有链接都被压缩在一起,我们可以通过给它们提供margin属性来将它们隔开更多:

header li {
    margin: 20px;
}
12. html导航栏 html导航栏

现在我们的导航栏项目已定位,该给它们一些样式了!我们要删除默认链接样式,所以继续把颜色设置为黑色,将文本样式设置为无(正常情况下会带有下划线)。 这是CSS:

header li a {
    color: black;
    text-decoration: none;
}
12. html导航栏 html导航栏

我们现在处于最后阶段! 我们的标识看起来有点怪异,所以让我们通过添加左边距来固定位置! 这是CSS:

header img {
    height: 80px;
    margin-left: 40px;
}

接下来我们将在导航栏中添加阴影。CSS有其自己的制作阴影有多种方法! 在另一篇文章中我将更深入地介绍所有不同类型的CSS阴影。我们将使用box-shadow属性在元素周围创建一个矩形阴影。

这是box-shadow属性的语法:

12. html导航栏 html导航栏

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,显示效果如下:

12. html导航栏 html导航栏

我们的导航栏现在有阴影!!

html导航栏总结

希望你从本文中学到很多东西! 现在你可以继续制作自己的导航栏,你访问的几乎每个网站都在使用它们,因此了解如何html导航栏编码是非常重要。

将来,我将撰写有关如何设置响应式导航栏样式的教程,这意味着它将适应不同的屏幕尺寸(例如,在移动设备上显示“菜单”图标)。

html导航栏源码下载

转载请注明:林雍岷 » 12. html导航栏