迹忆客 专注技术分享

本文将探讨导航栏的不同位置，它是网站的重要组成部分。 我们还将了解它的用途和不同的对齐设置。

HTML 中的导航栏

GUI 包括便于用户访问信息的导航系统或栏。 网页的用户界面 (UI) 组件包含指向其他网站部分的链接，称为导航栏或导航栏。

导航栏通常作为水平链接列表出现在页面顶部。 它可以位于标题上方或下方，但必须始终位于页面主要内容之前。

网站的导航必须简单易用。 它对网站产生了重大影响，因为它使访问者可以快速访问任何部分。

您网站上的导航栏可以有两种不同的样式：

1. 水平导航栏
2. 垂直导航栏

使用 HTML 和 CSS 创建导航栏

首先，我们将了解如何使用 HTML 组件创建导航栏。 由于导航栏只是不同链接的列表，因此列表元素（即 <ul> 和 <li>）用于创建导航栏。

列表中的每个项目都是指向另一个网站页面的链接。 因此，列表将按如下方式创建。

示例代码：

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>
li::marker {
    content: '';
}

因为它是一个简单的 <ul> 元素，所以为了让它充当导航栏，我们需要为其应用不同的 CSS 属性：

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}

li a {
  display: block;
  padding: 9px;
  background-color: dark blue;
}
</style>
li::marker {
    content: '';
}
<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

在这个例子中，不同的 CSS 属性表达了不同的目的：

1. list-style-type 设置为 none 以删除导航栏中的项目符号标记。
2. 默认情况下，边距和填充设置为零以删除浏览器中的任何边距。
3. overflow 属性设置为隐藏值以限制 li 元素移出列表。
4. 浮动设置为左值以在水平方向上创建导航栏。
5. 对于 <li> 项目， display: block 用于在块位置制作超链接，使整个块可点击。

我们可以将不同的样式和格式应用于此导航栏，例如背景颜色和文本颜色。

使用 CSS 居中对齐导航栏

要将导航栏居中对齐，我们可以添加两个属性：一个添加到 div 元素，另一个添加到 <ul> 元素，如下所示：

div{
text-align: center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

我们制作了 div 以将文本居中对齐，然后我们制作了 ul 元素以显示 inline-block。 这将使元素列表移动到页面的中心。

所以，你可以看到我们通过分配两个属性使导航栏位于页面的中心。 我们还可以根据我们的设计要求应用多个可以装饰导航栏的属性。