CSS 导航栏 详解
css3基础 2022-05-23 12:04:59小码哥的IT人生shichen
CSS 导航栏
导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。
导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。
在我们的实例中，将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：
示例代码：
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p class="note"><span>注释：</span>我们将 href="#" 用于测试链接。在实际的网站中，用的是 URL。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
现在，从列表中删除项目符号以及外边距和内边距（填充）：
示例代码：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>在此例中，我们从列表中删除了项目符号及其默认的内边距和外边距。</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子解释：
list-style-type: none;- 删除项目符号。导航条不需要列表项标记。- 设置
margin: 0;和padding: 0;删除浏览器的默认设置。
上例中的代码是垂直和水平导航栏中使用的标准代码，您将在下一章中学习更多内容。
