6-8 反色导航条
本节编程练习不计算学习进度，请电脑登录imooc.com操作

反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。如下：

<div class="navbar  navbar-inverse" role="navigation">
<div class="nav bar-header">
      <a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
      <li class="active"><a href="">首页</a></li>
      <li><a href="">教程</a></li>
      <li><a href="">关于我们</a></li>
</ul>
</div>

运行效果如下：

对应的源码，请查看bootstrap.css文件第4023行～第4111行（注意这个所说的Bootstrap版本是3.1.1，其它版本位置是不一致的），这80多行代码已从原文中节取出来，存放在右侧代码顶部“bootstrap.css”文件中，小伙伴们可以查看。

任务

我来试试：完成下面任务

编写代码实现“固定网页顶部的反色导航条”，效果图如下：


备注:这一小节没有正确性验证，请查看结果窗口,从而判断输入代码是否正确。

 

index.htmlbootstrap.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>基本导航条</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <!--代码-->
  11. <div class="navbar navbar-inverse" role="navigation">
  12.   <div class="navbar-header">
  13.      <a href="##" class="navbar-brand">慕课网</a>
  14.   </div>
  15.   <ul class="nav navbar-nav">
  16.       <li class="active"><a href="">首页</a></li>
  17.     <li><a href="">教程</a></li>
  18.     <li><a href="">关于我们</a></li>
  19.   </ul>
  20. </div>
  21.  
  22. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  23. <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  24.  
  25. </body>
  26. </html>
  1. .navbar-inverse {
  2.   background-color: #222;
  3.   border-color: #080808;
  4. }
  5. .navbar-inverse .navbar-brand {
  6.   color: #999;
  7. }
  8. .navbar-inverse .navbar-brand:hover,
  9. .navbar-inverse .navbar-brand:focus {
  10.   color: #fff;
  11.   background-color: transparent;
  12. }
  13. .navbar-inverse .navbar-text {
  14.   color: #999;
  15. }
  16. .navbar-inverse .navbar-nav > li > a {
  17.   color: #999;
  18. }
  19. .navbar-inverse .navbar-nav > li > a:hover,
  20. .navbar-inverse .navbar-nav > li > a:focus {
  21.   color: #fff;
  22.   background-color: transparent;
  23. }
  24. .navbar-inverse .navbar-nav > .active > a,
  25. .navbar-inverse .navbar-nav > .active > a:hover,
  26. .navbar-inverse .navbar-nav > .active > a:focus {
  27.   color: #fff;
  28.   background-color: #080808;
  29. }
  30. .navbar-inverse .navbar-nav > .disabled > a,
  31. .navbar-inverse .navbar-nav > .disabled > a:hover,
  32. .navbar-inverse .navbar-nav > .disabled > a:focus {
  33.   color: #444;
  34.   background-color: transparent;
  35. }
  36. .navbar-inverse .navbar-toggle {
  37.   border-color: #333;
  38. }
  39. .navbar-inverse .navbar-toggle:hover,
  40. .navbar-inverse .navbar-toggle:focus {
  41.   background-color: #333;
  42. }
  43. .navbar-inverse .navbar-toggle .icon-bar {
  44.   background-color: #fff;
  45. }
  46. .navbar-inverse .navbar-collapse,
  47. .navbar-inverse .navbar-form {
  48.   border-color: #101010;
  49. }
  50. .navbar-inverse .navbar-nav > .open > a,
  51. .navbar-inverse .navbar-nav > .open > a:hover,
  52. .navbar-inverse .navbar-nav > .open > a:focus {
  53.   color: #fff;
  54.   background-color: #080808;
  55. }
  56. @media (max-width: 767px) {
  57.   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
  58.     border-color: #080808;
  59.   }
  60.   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
  61.     background-color: #080808;
  62.   }
  63.   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
  64.     color: #999;
  65.   }
  66.   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  67.   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
  68.     color: #fff;
  69.     background-color: transparent;
  70.   }
  71.   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  72.   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  73.   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
  74.     color: #fff;
  75.     background-color: #080808;
  76.   }
  77.   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  78.   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  79.   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  80.     color: #444;
  81.     background-color: transparent;
  82.   }
  83. }
  84. .navbar-inverse .navbar-link {
  85.   color: #999;
  86. }
  87. .navbar-inverse .navbar-link:hover {
  88.   color: #fff;
  89. }
下一节