cjh CSS导航栏（垂直导航栏、水平导航栏）
CSS导航栏（垂直导航栏、水平导航栏）
导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。
导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。
在我们的实例中，将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：
实例
<!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>
现在，从列表中删除项目符号以及外边距和内边距（填充）：
<!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>
例子解释：
list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。
2、本资源基本为原创，部分来源其他付费资源平台或互联网收集，如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境，请不要在生产环境中随意模仿，以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS导航栏（垂直导航栏、水平导航栏）
作者： cjh
| 手机扫一扫，手机上查看此文章： |
一切源于价值！
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm