CSS 导航栏

演示：导航栏

垂直的

水平的

导航栏

拥有易于使用的导航对于任何网站都很重要。

使用 CSS，您可以将无聊的 HTML 菜单转变为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的示例中，我们将从标准 HTML 列表构建导航栏。

导航栏基本上是链接列表，因此使用 <ul> 和 <li> 元素非常有意义：

示例

<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>

亲自试一试 »

现在让我们从列表中删除项目符号、边距和填充：

示例

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

亲自试一试 »

示例解释：

list-style-type: none;- 移除子弹。导航栏不需要列表标记
放margin: 0;和padding: 0;删除浏览器默认设置

上面示例中的代码是垂直和水平导航栏中使用的标准代码，您将在下一章中了解更多信息。