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;
以删除浏览器默认设置
上面示例中的代码是垂直和水平导航栏中使用的标准代码,您将在后面的章节中了解更多信息。