CSS 导航栏
演示:导航栏
导航栏
易于使用的导航对于任何网站都很重要。
使用 CSS,您可以将单调的 HTML 菜单转换为外观精美的导航栏。
导航栏 = 链接列表
导航栏需要标准的 HTML 作为基础。
在我们的示例中,我们将从标准的 HTML 列表构建导航栏。
导航栏基本上是一个链接列表,因此使用 `<ul>` 和 `<li>` 元素是完全合理的
示例
<ul>
<li><a href="default.asp">主页</a></li>
<li><a href="news.asp">新闻</a></li>
<li><a href="contact.asp">联系方式</a></li>
<li><a href="about.asp">关于</a></li>
</ul>
自己动手试一试 »
现在,让我们移除列表的符号和边距和内边距。
示例说明
list-style-type: none;
- 移除项目符号。导航栏不需要列表标记。- 设置
margin: 0;
和padding: 0;
以移除浏览器默认设置。
上面示例中的代码是垂直和水平导航栏都使用的标准代码,您将在下一章中了解更多关于它们的内容。