代码：
<!--导航 start--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!--小屏幕导航按钮和logo start--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand">麦子学院</a> </div> <!--小屏幕导航按钮和logo end--> <!--导航 start--> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">首页</a> </li> <li><a href="index.html">论坛</a> </li> <li><a href="index.html">前端开发</a> </li> <li><a href="index.html">最新课程</a> </li> <li><a href="index.html">移动APP</a> </li> <li><a href="index.html">联系我们</a> </li> </ul> </div> <!--导航 end--> </div> </nav> <!-- 导航 end-->设置CSS样式：
1.设置整个网站字体
body{ font-family: 'Microsoft YaHei', sans-serif; }2.设置nav的背景颜色、边框、下阴影
.navbar-default{ background-color: #fff; border: none; box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.25); }3.设置logo的字体大小、字体加粗、字体颜色、高度、行高
.navbar-default .navbar-brand { font-size: 30px; font-weight: bold; color: #40D2B1; height: 70px; line-height: 35px; }4.设置导航的字体大小、字体加粗、字体颜色、高度、行高
.navbar-default .navbar-nav>li>a { font-size: 16px; font-weight: bold; color: #666; height: 70px; line-height: 35px; }5.设置屏幕缩小时菜单的样式
1）位置
2）鼠标悬浮时颜色变化
3）按钮里横线的颜色
.navbar-toggle{ margin-top: 17px; } .navbar-default .navbar-toggle:hover { border-color: #40D2B1; background-color: rgb(69, 210, 184); } .navbar-default .navbar-toggle .icon-bar { background-color: #1C9982; }效果图：
