CSS 导航栏
Demo:导航栏
导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS,您可以将无聊的 HTML 菜单转换为美观的导航栏。
导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。
在我们的实例中,将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表,因此使用 <ul> 和 <li> 元素会很有意义:
实例
<ul>
<li><a href="default.php">Home</a></li>
<li><a href="news.php">News</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="about.php">About</a></li>
</ul>
亲自试一试 »
<li><a href="default.php">Home</a></li>
<li><a href="news.php">News</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="about.php">About</a></li>
</ul>
现在,从列表中删除项目符号以及外边距和内边距(填充):
实例说明:
- list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
- 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。
上例中的代码是垂直和水平导航栏中使用的标准代码,您将在下一章中学习更多内容。