今天完成的事情： 今天把任务14的导航栏已经写出来来，自己测试了下，在手机端页面也可以正常下拉，

代码如下

<nav class="navbar navbar-expand-md">
      <div class="container">
      <div class="navbar-brand" href="#">
          <img src="image/task08-logo.png" height="49" width="107"/></div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon">
    <img src="image/menu.png" height="25" width="25"/></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
          <ul class="navbar-nav">
              <li class="nav-item text-center ">
                  <a class="nav-link" href="task08.html">首页</a>
              </li>
              <li class="nav-item text-center">
                  <a class="nav-link" href="task08-job.html">职业</a>
              </li>
              <li class="nav-item text-center">
                  <a class="nav-link" href="task08-friends.html">推荐</a>
              </li>
              <li class="nav-item text-center">
                  <a class="nav-link" href="#">关于</a>
              </li>
          </ul>
      </div>

      </div>
  </nav>

.navbar{
  background-color: #29b078;
}
.nav-logo{
  width: auto;
}
.nav-item{
  height: 10vh;
  line-height: 10vh;
  padding: {
    left: 1rem;
    right: 1rem;
  };
}
.nav-item:hover{
  border-bottom: 2px solid #ffffff;
}
.nav-txt{
  @include d-a-c;
}
input[type=checkbox], label {
  display: none;
}
@media screen and (max-width: 780px){

  .navbar{
    padding: {
      top: 0.5rem;
      bottom: 0.5rem;
    };
  }
  label{
    display: inline-block;
    float: right;
    cursor: pointer;
  }
 .nav-txt-one{
   display: inline-block !important;
   width: 100%;
   padding-left: 0;
 }
  .nav-txt{
    display: none;
   position: absolute;
    right: 0;
    z-index: 99;
    top: 95px;
    background-color: #29b078;
    width: 100%;
    padding-bottom: 1rem;
  }
  .nav-item{
    text-align: center;
  }
  input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: none;
  }

  input[type=checkbox]:checked + .nav-txt{
    display:inline-block;
  }

}

主要利用的就是input点击效果来实现

明天计划的事情：明天的话计划完成任务14的轮播图页面，，
遇到的问题：

      1，首先自己在制作导航懒得额时候，在pc端的话各个界面正常，但是在手机端的话却出现了点击事件无效的结果，网上也找了很多个教程。后来经过排查发现，导航栏在屏幕缩小的情况下实现正常点击效果的话，说简单也简单，首先是使用媒体查询在页面宽度缩小的一定宽度的时候隐藏其中的内容

@media screen and (max-width: 780px){
     .nav-txt:{
     display:none;
}
 }

就可以实现隐藏效果，然后的话绑定点击事件，这个要用到这个属性

 input[type=checkbox]:checked + .nav-txt{
   display:inline-block;
 }

使用这个做完后，点击的话确实哟效果，但是导航栏还是和之前一样横排显示，这方面算是一个问题，后来经过排查发现我在pc端的时候对导航栏里面的内容使用了 

     display: flex;

这个属性，但是点击事件触发后，依旧是横排显示，这时候需要用到把里面的内容使用

  display: inline-block

转换为块级内联元素，但是添加之后依然发现没有效果，后来的话在在这个后面改成

  display: inline-block !important;

算是生效了

     2，目前的正在做轮播图的设置，网上有个教程使用的label和input来实现的，明天的话我计划修改一下样式，尽量实现效果。

收获： 之前使用框架做导航栏的话确实很简单，但自己用纯css写过一遍之后，发现其实原理的实现并不是很困难，主要开始在缩小之后对于其样式的更改，这方面配合display属性基本可以实现大部分效果，。自己的话对于label和input之间的联系又了更深一层的认识