今天给大家分享一个快速搭建导航页的demo，先展示一下效果图 顶部是我们logo区域，左侧是菜单栏，右侧是对应菜单的内容区域。 在写页面之前，先引入我们需要的通用css
这边我引用的不是cdn上的，所以大家可以自己根据需要引入boostrap的css即可。 话不多说，直接上代码 <body style="height: 100vh"> <nav class="navbar navbar-dark bg-dark" style="padding-right: 0px;height: 9%;color: wheat;justify-content:flex-start"> <a class="navbar-brand" href="#">Logo</a> </nav> <div class="container-fluid" style="height:90%"> <div id="main" class="row" style="height:100%"> <div id="left" class="col-md-2 bg-dark" style="height:100%;"> <ul class="list-group list-group-flush bg-dark"> <li class="list-group-item active bg-dark"><a class="stretched-link" href="./index.html" target="content"> <i class="glyphicon glyphicon-home"></i>首页</a></li> <li class="list-group-item bg-dark"><a class="stretched-link" href="./spider-data.html" target="content"> <i class="glyphicon glyphicon-home"></i>Page1</a></li> <li class="list-group-item bg-dark"><a class="stretched-link" href="./index.html" target="content"> <i class="glyphicon glyphicon-home"></i>Page2</a></li> <li class="list-group-item bg-dark"><a class="stretched-link" href="./userManager.html" target="content"> <i class="glyphicon glyphicon-home"></i>Page3</a></li> <li class="list-group-item bg-dark"><a class="stretched-link" href="./userInfo.html" target="content"> <i class="glyphicon glyphicon-home"></i>Page4</a></li> <li class="list-group-item bg-dark"><a class="stretched-link" href="./index.html" target="content"> <i class="glyphicon glyphicon-home"></i>Page5</a></li> <li class="list-group-item bg-dark"><a class="stretched-link" href="./index.html" target="content"> <i class="glyphicon glyphicon-home"></i>Page6</a></li> </ul> </div> <div id="content" class="col-md-10 embed-responsive"> <iframe name="content" class="embed-responsive-item embed-responsive-1by1" src="./index.html"></iframe> </div> </div> </div> </body>这里我的内容区是以iframe形式载入，只需要更改菜单选项中的href路径即可，关键属性就是li标签中的target指向的我们content，实现点击菜单，显示对应页面。 当然只有bootstrap的css和上述代码还是不够的，接下里我们来写css来实现一开始我们图片的样式。 在没有写样式之前，页面应该是这个样子的。 加入我们的_index.css
* { margin: 0; padding: 0; list-style: none; text-decoration: none; } li.list-group-item:hover { background-color: rgba(0, 0, 0, 0.125) !important; cursor: pointer; } li.list-group-item.active { background-color: rgba(0, 0, 0, 0.1) !important; border-color: rgba(0, 0, 0, 0.125); } #main { margin-top: 3px; border-top: 1px solid rgba(0, 0, 0, 0.125); } #left { padding: 2px; border-right: 1px solid rgba(0, 0, 0, 0.125); } #content { padding: 2px; } a[target="content"] { color: white; text-decoration: none; } #left ul i { margin-right: 16px; } #left ul a { color: white; transition: .5s; } #left ul li:hover a { padding-left: 50px; }加入后样式就会变成之开头图片中的样子。 这里重点是 # left ul a 加入transition属性，使得它的会在样式更改的时候产生一个过度效果，还有一个是left ul li:hover a加入padding-left属性，使得我们鼠标移动上去时会发生一个菜单滑动会向右平移的特效，当然大家还有什么需要的样式都可以自行加入。 一个简单的导航页就这样做成啦。
