CSS 垂直导航栏
垂直导航栏
要构建垂直导航栏，您可以除了上一页的代码之外，还可以对列表中的 <a> 元素进行样式设置
示例解释
display: block;- 将链接显示为块元素，使整个链接区域可点击（不仅仅是文本），并且允许我们指定宽度（以及内边距、外边距、高度等，如果您需要）width: 60px;- 块元素默认情况下会占用可用的全部宽度。我们想要指定 60 像素的宽度
您也可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为它们在显示为块元素时会占用可用的全部宽度。这将产生与我们先前示例相同的结果
示例
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” 类，让用户知道他/她当前所在的页面
居中链接并添加边框
向 <li> 或 <a> 添加 text-align:center 以居中链接。
在`ul>`中添加`border`属性，在导航栏周围添加边框。如果你也想要在导航栏内添加边框，在所有`li>`元素中添加`border-bottom`，除了最后一个。
示例
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; /* 如果侧边栏内容过多，则启用滚动 */
}
亲自尝试 »
注意： 此示例可能不适用于移动设备。
