今天完成：

对拆分出的组件进行设置，完成使用css写响应式导航栏，轮播图

 .nav{
    ul{
      background: url("images/logo.png") no-repeat 1rem;
      margin: 0;
      padding: 1rem 0 1rem 1rem;
      background-color: $color;
      text-align: right;
      position: relative;
      .current{
        display: none;//隐藏汉堡图标
      li{
        list-style: none;
        display: inline-block;//方便对齐
        a{
          text-decoration: none;
          color: white;
          padding:.8rem 1rem;
          &:hover{
            
border-bottom: solid 2px white
@media screen and (max-width: 600px){
  .header{
    .nav{
      ul{
        padding:.6rem 1rem;
        &:hover{
          li{
            display: block;//显示子项
            a{
              display: block;
              text-align: center;

        .current{
          display: block;//显示汉堡图标作为导航栏缩略图
}
        li{
          display: none;//隐藏多余列表

.turn{
  position: relative;
  overflow: hidden;
  width: 100%;
  .turn-container{
    width: 500%; 图片容器是5倍的宽度，隐藏多余的就是只显示一张。
    transform: translate(0,0);
    animation: loop 10s linear infinite;
    img{
      
width: 20%; 百分比是为了实现自适应
float: left
@keyframes loop {
  0% {transform: translate(0,0);}
  15% {transform: translate(0,0);}

  20% {transform: translate(-20%,0);}
  35% {transform: translate(-20%,0);}

  40% {transform: translate(-40%,0);}
  55% {transform: translate(-40%,0);}

  60% {transform: translate(-60%,0);}
  75% {transform: translate(-60%,0);}

  80% {transform: translate(-80%,0);}
  95% {transform: translate(-80%,0);}

  100% {transform: translate(0,0);}
}

明天计划：

继续任务14，争取完成。

梳理文件结构，总感觉还是在堆砌，没有一点条理性，虽然只是简单的几个页面和图，但好歹也是算有点结构了，先拿简单的练练手以后难得也能有点基础。

遇到困难：

在做轮播图的时候，在网上找的教程都是用的固定宽高，虽然是比较简单，但是跟我们的响应式冲突了，虽然也试着用媒体查询解决，但是代码很麻烦，改了宽高又要更改轮播的数据。所以索性直接用百分比做单位，最外层容器设置100%是占据整个body的宽度，次级容器500%是为了容纳5正banner，图片的宽度设置的20%宽度根据父级500%计算。正好是100%，完美实现自适应！！！

收获：

css写响应式导航栏，轮播图