手册
目录
收藏428
分享
阅读2653
更新时间2025-07-16
创建背景色为灰色的基础垂直导航栏,并在用户将鼠标移到链接上时改变链接的背景色:
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 属性添加到
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; /* 如果侧栏的内容太多,则启用滚动条 */
}
运行实例 »点击 "运行实例" 按钮查看在线实例
注意:本例在移动设备上可能无法正常工作。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77.2万人学习
共29课时
61.9万人学习
共25课时
39.4万人学习
共43课时
71.1万人学习
共25课时
61.8万人学习
共22课时
23万人学习
共28课时
34万人学习
共89课时
125.5万人学习