2021.5.18
今日学习进度：CSS导航栏
| 第一天 | 第二天 | 第三天 | 第四天 | 第五天 | |
| 所花时间（小时） | 5 | 6 | |||
| 代码量（行） | 200 | 300 | |||
| 博客量（篇） | 1 | 1 | |||
| 了解到的知识点 | CSS伪元素 | CSS导航栏1 |
导航栏
易用的导航对于任何网站都很重要。
通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。
导航栏 = 链接列表
导航栏需要标准 HTML 作为基础。
在我们的实例中，将用标准的 HTML 列表构建导航栏。
导航栏基本上就是链接列表，因此使用
- 和
- 元素会很有意义：
实例
现在，从列表中删除项目符号以及外边距和内边距（填充）：
实例
ul { list-style-type: none; margin: 0; padding: 0; }
例子解释：
- list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
- 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。
垂直导航栏
- Home
- News
- Contact
- About
如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 元素的样式：
实例
li a { display: block; width: 60px; }例子解释：
- display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
- width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。
您还可以设置
- 的宽度，并删除 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：
- Home
- News
- Contact
- About
- Home
- News
- Contact
- About
- 或 ，使链接居中。
- 元素添加 border-bottom，最后一个元素除外：
- Home
- News
- Contact
- About
实例
ul { list-style-type: none; margin: 0; padding: 0; width: 60px; } li a { display: block; }
垂直导航栏实例
创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：
实例
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; }
活动/当前导航链接
向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上：
实例
.active { background-color: #4CAF50; color: white; }
居中链接以及添加边框
把 text-align:center 添加到
将 border 属性添加到
- ，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有
实例
ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }
实例
ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全高 */ position: fixed; /* 使它产生粘性，即使在滚动时 */ overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */ }