CSS 导航栏

Demo：导航栏

css_navbar_demo.htm

导航栏

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

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

导航栏 = 链接列表

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

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

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

实例

  1. <ul>
  2.   <li><a href="index.asp">Home</a></li>
  3.   <li><a href="news.asp">News</a></li>
  4.   <li><a href="contact.asp">Contact</a></li>
  5.   <li><a href="about.asp">About</a></li>
  6. </ul>

css_navbar_basic_html.htm

现在，从列表中删除项目符号以及外边距和内边距（填充）：

实例

  1. ul {
  2.   list-style-type: none;
  3.   margin: 0;
  4.   padding: 0;
  5. }

css_navbar_basic_css.htm

例子解释：

  • list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
  • 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

上例中的代码是垂直和水平导航栏中使用的标准代码，您将在下一章中学习更多内容。