今天完成的任务

1.高估了自己的进度，一天刚刚完成任务八三个页面的公共顶部及底部。

2.实现了顶部和底部的自适应，导航栏的响应式，具体效果如下

正常状态

鼠标hover

屏幕小于768px

鼠标点开导航button

明天准备完成的事情

1.继续任务八页面1，并完成页面自适应

2.争取页面二能开始。

遇到的问题

主要是实现导航栏响应式的问题，一开始我天真的以为是纯css实现，结果并不是，百度一番之后，先是下载了JQ，分别引入了JQ和BS.js。

然后开始着手，响应式导航栏主要用到的类分别是 .nav .collapse .navbar-collapse,其中要在响应式里面被折叠起来的内容一定要在

class=“collapse navbar-collapse”内 ，相应的，因为折叠后是在一个button内的，还要在navbar-collapse外添加一个button按钮，

这个button是我copy下来的，

<button type="button" class="navbar-toggle" data-toggle="collapse"
        data-target="#example-navbar-collapse">
    <span class="sr-only">切换导航</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

比较主要也是我自己被坑了许久的就是，data-toggle后面那个是折叠的内容，data-target后面那个是点击button后出现的新的导航，天真的我又一次以为这些是都已经写好了的，结果就是点开的导航怎么都不是想要的效果。后来修改后，新写了一个导航，标上id=“example-navbar-collapse”，这个id应该是可以自己修改的，保证两边同步就可以。完整代码如下

<div class="public-nav-wrap">
  <nav class="nav public-nav container">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
      <span class="sr-only">切换导航</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="jnshu-logo"></a>
    <div class="collapse navbar-collapse public-nav-lg" >
      <ul class="nav nav-pills navbar-right">
        <li><a href="#">首页</a></li>
        <li><a>职业</a></li>
        <li><a>推荐</a></li>
        <li><a>关于</a></li>
      </ul>
    </div>
    <div class="container hidden-lg hidden-md hidden-sm public-nav-xs" id="example-navbar-collapse">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">首页</a></li>
        <li><a href="#">职业</a></li>
        <li><a href="#">推荐</a></li>
        <li><a href="#">关于</a></li>
      </ul>
    </div>
  </nav>
</div>

收获

对于BS有进一步的理解，对于BS的 hidden 什么的觉得真的好方便，虽然过程是比较曲折，但是对于迟早需要解决的问题，解决了总是好的