CSS 导航条
Demo：导航条
导航条
易用的导航对于任何网站都很重要。
通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。
导航条 = 链接列表
导航条需要标准 HTML 作为基础。
在我们的实例中，将用标准的 HTML 列表构建导航条。
导航条基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：
实例
<!DOCTYPE html><html><body><ul><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系方式</a></li><li><a href="#about">关于我们</a></li></ul><p>注释：我们将 href="#" 用于测试链接。在实际的网站中，用的是 URL。</p></body></html>
现在，从列表中删除项目符号以及外边距和内边距（填充）：
实例
<!DOCTYPE html><html><head><style>ul {list-style-type: none;margin: 0;padding: 0;}</style></head><body><p>在此例中，我们从列表中删除了项目符号及其默认的内边距和外边距。</p><ul><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系方式</a></li><li><a href="#about">关于我们</a></li></ul></body></html>
例子解释：
list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。
上例中的代码是垂直和水平导航条中使用的标准代码，您将在下一章中学习更多内容。