📜  如何使用 HTML 和 CSS 创建垂直导航栏?

📅  最后修改于: 2021-11-07 07:42:49             🧑  作者: Mango

阅读本文后,您将能够构建自己的垂直导航栏。要学习本文,您只需要对 HTML 和 CSS 有一些基本的了解。

让我们开始编写我们的垂直导航栏,首先我们将编写导航栏的结构。在本教程中,我们使用 HTML 列表项创建导航栏。我们在导航栏中使用了font-awsome 5 个图标。为此,在“title”标签之后,我们添加了“script”标签以包含字体很棒的库。

HTML


CSS


CSS


CSS


HTML



    Page Title
     
    


    


我们已经使用 HTML 定义了网页的结构。现在我们需要使用 CSS 属性添加一些样式。首先,从列表中删除项目符号、边距和填充。现在给出背景颜色和特定的宽度。

CSS


  • 列表样式类型:无;属性从 HTML 列表中删除项目符号。
  • 保证金:0;填充:0;从元素中删除浏览器默认边距和填充。

为了创建垂直导航栏,您必须为列表中的 元素设置样式。

CSS


CSS


  • 边距右:10px;它在文本和图标之间添加了一些边距

最终代码:以下是上述所有代码片段的组合。

输出: