今天完成的事情：今天完成了任务15的nav部分。
明天计划的事情：百度css的轮播图，然后完成接下来的部分。
遇到的问题：由于对各种不太常用的选择器的意义不明，造成调试的时候效果不出来，幸好有大神指导，及时解决。也明白了“～”选择器的应用。
收获：利用input+label 和 transform 完成了类似于bootstrap的navbar-collapse.

我是先写了桌面端点navbar，然后手机端的时候隐藏掉，再写一个手机端的navbar，绝对定位加z-index：-1 隐藏，然后用input+label+transform把下面的div往下推，让手机端的navbar显示出来。

#navbar-collapse {
  display: none;     //html <input type="checkbox" id="navbar-collapse">
}
#navbar-collapse:checked ~ .main {
  
transform: translateY(148px);    //由于使用的是"~"相邻选择器,所以input标签要放在main前面,
}                                                     
label {                               //点击<label for="navbar-collapse" >把main向下推,显示出                                                         手机端的导航栏.
  float: right;
  display: inline;
  font-size: 30px;
  display: none;
  color: #fff;
  margin: 30px 0;
  cursor: pointer;
}
@media (max-width: 767px) {
  label {
    display: block !important; //手机端出现汉堡图....
  }
}
.navbar-collapse-list {
  position: absolute;          //手机端的导航栏,利用绝对定位+z-index,隐藏在<div.main>的下面
  top: 100px;
  display: none;
  z-index: -1;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #29b078;
  border-top: 1px solid #fff;
}
@media (max-width: 767px) {
  .navbar-collapse-list {
    display: block !important;
  }
}
.navbar-collapse-list li {
  margin: 15px 0;
}
.main {
  background: #fff;
  height: 500px;
  transition: all .5s;
}

以上.