导航栏引导程序 5 - Html

本篇教程介绍如何用 HTML 制作一个简单的导航栏引导程序。导航栏是网站的重要组成部分，能够帮助用户快速找到页面内容，提高用户体验。

准备工作

在开始制作前，你需要了解以下 HTML 标签和 CSS 属性：

• HTML: div，ul，li，a
• CSS: display，float，background，color，text-align，line-height，font-size，padding，border

编写 HTML 代码

首先，我们需要编写 HTML 代码。在文件中添加以下代码：

<div id="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

以上代码创建了一个 div 容器，内嵌一个无序列表 ul，列表项 li 包含链接 a。将这段代码保存为 index.html 文件，用浏览器打开，将会看到一个简单的导航栏。

添加 CSS 样式

现在我们需要添加 CSS 样式，设置导航栏的样式。在文件中添加以下代码：

#navbar {
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 50px;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
}

a {
  display: block;
  color: #fff;
  font-size: 16px;
  padding: 0 10px;
  border-right: 1px solid #bbb;
}

a:hover {
  background: #555;
}

以上代码设置了 div 容器的背景颜色为 #333，文字颜色为白色，居中对齐，行高为 50 像素。在 ul 标签上设置了内联块级布局、列表符号去除、外边距和内边距为 0。在 li 标签上设置浮动，使得链接在同一行显示。在 a 标签上设置了块级展示、字体颜色、字号、内边距和右边框线。最后，当鼠标悬浮在链接上时，设置了背景颜色为 #555。

结语

现在你知道如何用 HTML 和 CSS 制作一个简单的导航栏引导程序了。当然，这只是一个基础的版本，你可以进一步扩展它，添加图标、下拉菜单等功能，让它更加实用和美观。