今天完成的事情：

1.优化官网布局和细节。并手写导航栏、轮播图。

明天计划的事情：

1.手写栅格布局。完成任务十四。

遇到的问题：

1.浏览器宽度设置小于720px时隐藏原来的文字导航，并出现按钮

@media (max-width: 720px) {
  .nav-box-page {
    display: none;
  }

.btn-page:checked + .nav-list {
  display: block;
}

点击按钮时，出现下拉菜单，再次点击时菜单消失。实现方法是用input+checked。我将按钮和菜单放置于同一父元素下，用相邻选择器选择按钮后面的菜单标签。此时按钮并没有在logo技能树所在的父项里，因此我将按钮设置了绝对定位，改变参数定位到图示位置。

<label for="btn-menu"></label>
<input class="btn-page" id="btn-menu" type="checkbox">

<div class="nav-list">
    <div>首页</div>
    <div>职业</div>
    <div>推荐</div>
    <div>关于</div>
</div>

2.手写轮播图。

简单实现了这样一个效果：

html部分：

<div class="banner">
    <div class="box-pic">
        <img src="img/技能树首页_02.png" alt="首页">
        <img src="img/首页_02.png" alt="首页2">
        <img src="img/首页_03.png" alt="首页3">
        <img src="img/技能树首页_02.png" alt="首页">
    </div>
</div>

css部分：

main .banner {
  width: 100%;
  overflow: hidden;

  .box-pic {
    width: calc(100% * 4);
    display: flex;
    animation: banner 10s ease 1s infinite;
    -moz-animation: banner 10s ease 1s infinite;
    -webkit-animation: banner 10s ease 1s infinite;

    &:hover {
      animation-play-state: paused;
      //鼠标移动到轮播图上就停止
    }

    img {
      width: calc(100% / 4);
      cursor: pointer;
    }
  }
}

@keyframes banner {
  0%, 16% {
    margin-left: 0;
  }

  32%, 48% {
    margin-left: -100%;
  }

  64%, 80% {
    margin-left: -200%;
  }

  100% {
    margin-left: -300%;
  }
}

写出四张图片1231，利用animation和@keyframes指令，infinite意为无限循环，将父项banner做出移动效果，并配合关键帧指令，设定4张图在不同百分比下左移的大小。（此处百分比不是特别理解）。

收获：

1.将css文件分成了三个部分，reset重置，common通用和每个css不同的单独文件。好处是减少网页相同部分的代码重复写。

<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="common.css" type="text/css">
<link href="mission14-1.css" rel="stylesheet" type="text/css">

2.用input手写下拉菜单更加熟练些了，不过手写轮播图还不算特别理解，需要再看看。