CSS导航栏

百科大全

更新时间：2025-10-05 14:21:1450

admin管理员组
文章数量:1794759

CSS导航栏

概念

易用的导航对于任何网站都很重要。

通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义：

<ul> <li><a href="default.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>

1.list-style-type: none; - 删除项目符号。导航条不需要列表项标记。

2.设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

ul { list-style-type: none; margin: 0; padding: 0; } 垂直导航栏

display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

li a { display: block; width: 60px; } 垂直导航栏的应用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* 鼠标移动到选项上修改背景颜色 */ li a:hover { background-color: #555; color: white; } </style> </head>

<p>背景颜色添加到链接中显示链接的区域</p> <p>注意,整个区域是可点击的链接,而不仅仅是文本。</p> </body> </html>

这样就形成了一个简单的灰色垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色。

水平导航栏

有两种创建水平导航栏的方法：使用行内或浮动列表项。

行内列表项

构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将 <li> 元素指定为 inline。

display: inline; -默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

li { display: inline; } 浮动列表项

创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局。

float: left; - 使用 float 使块元素滑动为彼此相邻。
display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等。
padding: 8px; - 使块元素更美观。
background-color: #dddddd; - 为每个元素添加灰色背景色。

水平导航栏实例

<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

li { float: left; }

li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

li a:hover { background-color: #111; } </style> </head> <body>

<ul> <li><a class="active" 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>

这样就形成了一个简单的深色背景水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色。

总结

1.垂直导航栏有活动/当前导航栏，居中链接导航栏，全高固定垂直导航栏等各种样式。

2.水平导航栏有活动/当前导航链接，右对齐链接，边框分隔栏，固定的导航栏，灰色水平导航栏，粘性导航栏等各种样式。

本文标签： css

版权声明：本文标题：CSS导航栏内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686974036a124260.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。