CSS 导航栏

演示：导航栏

导航栏

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

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

导航栏 = 链接列表

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

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

导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是完美的意义：

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

尝试一下 »

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

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

尝试一下 »

示例说明：

• list-style-type: none;：移除子级。导航栏不需要列表标记。
• margin: 0;、padding: 0;：设置和删除边距。

上面示例中的代码是垂直和水平导航栏中使用的标准代码，您将在下一章中详细了解这些代码。