阅读本文后，您将能够构建自己的垂直导航栏。要学习本文，您只需要对 HTML 和 CSS 有一些基本的了解。
让我们开始编写我们的垂直导航栏，首先我们将编写导航栏的结构。在本教程中，我们使用 HTML 列表项创建导航栏。我们在导航栏中使用了font-awsome 5 个图标。为此，在“title”标签之后，我们添加了“script”标签以包含字体很棒的库。
我们已经使用 HTML 定义了网页的结构。现在我们需要使用 CSS 属性添加一些样式。首先，从列表中删除项目符号、边距和填充。现在给出背景颜色和特定的宽度。
CSS
- 列表样式类型：无；属性从 HTML 列表中删除项目符号。
- 保证金：0；和填充：0;从元素中删除浏览器默认边距和填充。
为了创建垂直导航栏，您必须为列表中的 元素设置样式。
CSS
- 显示：块；显示像块元素这样的链接的属性使链接区域可点击。它允许我们指定宽度（填充、边距、高度等）
- 填充：8px 16px；顶部和底部填充为 8px。左右边距为 16px。
- 文字装饰：无；删除 元素的下划线
CSS
- 边距右：10px;它在文本和图标之间添加了一些边距
最终代码：以下是上述所有代码片段的组合。
输出： 