CSS 垂直导航栏
垂直导航栏
如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：
实例说明:
- display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
- width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。
您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：
实例
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
亲自试一试 »
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;
}
亲自试一试 »
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" 类，以使用户知道他/她在哪个页面上：
居中链接以及添加边框
把 text-align:center 添加到 <li> 或 <a>，使链接居中。
将 border 属性添加到 <ul>，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外：
实例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
亲自试一试 »
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; /* 如果侧栏的内容太多，则启用滚动条 */
}
亲自试一试 »
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全高 */
position: fixed; /* 使它产生粘性，即使在滚动时 */
overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}
注释: 本例在移动设备上可能无法正常工作。
