导航栏
垂直导航栏、水平导航栏、当前页高亮、固定导航
导航栏
导航栏是网站最重要的 UI 组件——从简单的链接列表到完整的导航系统。
学完本章你将： 掌握垂直/水平导航栏、当前页高亮、固定导航。
垂直导航栏
css
.nav-vertical {
list-style: none;
padding: 0;
width: 200px;
}
.nav-vertical li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
border-bottom: 1px solid #eee;
}
.nav-vertical li a:hover {
background: #4CAF50;
color: white;
}
.nav-vertical li a.active {
background: #4CAF50;
color: white;
}水平导航栏
css
.nav-horizontal {
list-style: none;
padding: 0;
background: #333;
overflow: hidden;
}
.nav-horizontal li { float: left; }
.nav-horizontal li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.nav-horizontal li a:hover {
background: #4CAF50;
}
.nav-horizontal li a.active {
background: #4CAF50;
}固定导航栏
css
/* 固定在顶部 */
.nav-fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
/* 下方内容需要留出空间 */
body { padding-top: 50px; }