- 站点信息
- 问题反馈
- 邮箱：[email protected]
- 吐槽一下
关注微信
©2020-2025 ioDraw All rights reserved,
Privacy Policy
概念
易用的导航对于任何网站都很重要。
通过使用 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.com)</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>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
<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.水平导航栏有活动/当前导航链接，右对齐链接，边框分隔栏，固定的导航栏，灰色水平导航栏，粘性导航栏等各种样式。