今天完成的事情：

了解了grid属性，使用grid属性完成了页面2的布局。（http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html）

完成了任务14的页面布局。期间，在css文件中加入了bootstrap的栅格样式，和导航栏，轮播图组件块。

导航栏使用input和label的checked属性，改变导航项目不同状态下的样式完成正常排列和堆叠状态的切换。

<nav>
    <!--导航栏logo-->
    <a href="##">
        <img src="../task8/task8.logo.png" height="52"/>
    </a>
    <input type="checkbox" id="nav-menu">
    <!--导航栏控件-->
    <div id="menu">
        <label id="nav-menu-control" for="nav-menu">≡</label>
    </div>
    <!--导航栏列表-->
    <ul class="list">
        <li class="list-item"><a class="nav-link" href="task14.html">首页</a></li>
        <li class="list-item"><a class="nav-link" href="task14-2.html">职业</a></li>
        <li class="list-item"><a class="nav-link" href="task14-3.html">推荐</a></li>
        <li class="list-item"><a class="nav-link" href="##">关于</a></li>
    </ul>

.navbar {
  background-color: $color2;

  > .navigation > .row > .col > nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    > #nav-menu {
      display: none;
    }

    > #menu {
      display: none;
      @media screen and (max-width: 780px) {
        display: block;
        &:checked ~ .list {
          display: block;
          width: 100%;
        }
        > #nav-menu-control {
          display: block;
          font-family: Courier New;
          width: 5rem;
          font-size: 4rem;
          line-height: 3rem;
          text-align: center;
          color: $colord;
          cursor: pointer;
          padding-top: 5px;
        }
      }
    }
    > input:checked ~ .list {
      display: block;
      width: 100%;
    }
    > .list {
      display: flex;
      list-style: none;

      @media screen and (max-width: 780px) {
        display: none;
      }
      > .list-item > .nav-link {
        display: inline-block;
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
        color: $colord;
        text-decoration: none;
        text-align: center;
        border-bottom: 3px solid transparent;

        &:hover, &:visited {
          border-bottom: 3px solid $colord;
        }

        @media screen and (max-width: 780px) {
          display: block;
          height: 60px;
          line-height: 60px;
          padding: 0 10px;
          color: $colord;
          text-decoration: none;
          text-align: center;
        }
      }
    }
  }
}

轮播图仍旧使用input属性改变在checked与否状态下控件的隐藏与显现，图片的margin-left值递增，控制图片的切换。

<div class="viewport">
    <input type="radio" checked="checked" name="slide" id="pick1">
    <input type="radio" name="slide" id="pick2">
    <input type="radio" name="slide" id="pick3">
    <div id="wrap">
        <ul class="slider">
            <li><img src="img/1-beijing.png"/></li>
            <li><img src="img/1-beijing2.png"/></li>
            <li><img src="img/1-beijing3.png"/></li>
        </ul>
        <div id="box">
            <label id="box1" for="pick1" ></label>
            <label id="box2" for="pick2" ></label>
            <label id="box3" for="pick3" ></label>
        </div>
        <label id="arrow1" for="pick1"></label>
        <label id="arrow2" for="pick2"></label>
        <label id="arrow3" for="pick3"></label>
    </div>
</div>

#pick1:checked ~ #wrap .slider {
  margin-left: 0;
}

#pick2:checked ~ #wrap .slider {
  margin-left: -100%;
}

#pick3:checked ~ #wrap .slider {
  margin-left: -200%;
}


#pick1:checked ~ #wrap #arrow1 {
  display: none;
}

#pick1:checked ~ #wrap #arrow2 {
  display: block;
  cursor: pointer;
  left: 95%;
}

#pick1:checked ~ #wrap #arrow3 {
  display: block;
  left: 5%;
  transform: translate(-50%, -50%) rotate(-133deg);
  cursor: pointer;
}

样式代码太多就不放全了。

明天计划的事情：

检查代码，优化代码规范，结构。

遇到的问题：

之前做导航栏按钮控件和轮播图的切换时候以为代码失效，后来发现是使用属性时父元素没写全，或者位置放偏差了的低级错误耽搁了好久。