今天完成的事情：

完成了任务八、九的第二个页面

.box-fifteen{
    display: none;
    position: absolute;
    text-align: center;
    padding: 80px 40px 40px 40px;
    height: 390px;
    background-color: #3d3d3d;
    opacity: 0.9;
    -webkit-animation: gogogo 1s;
}
@keyframes gogogo{
    0%{
        left: 100%;
        top: 0;
    }
    25%{
        left: 0;
        top: 0;
    }
}
.teacher{
    color: #fff;
}
.apple{
    color: #fff;
}
.wrapper:hover .box-fifteen{
    display: block;
}
.even a{
    text-decoration: none;
    color: black;
}
.direction a{
    text-decoration: none;
    color: black;
}

明天计划的事情：明天计划完成任务八、九的最后一个页面

遇到的问题：今天感觉还好没有什么特别难的，因为对Grid 布局已经比较熟练了

收获：对Grid 布局运用的更加熟练了，也了解到grid-template-columns用来定义网格列的宽度既轨道宽度，代码表示将容器划分为4列，列的宽度都为**px，宽度可以随意的更改。grid-template-rows用来定义网格行的高度，代码表示将容器划分4个行。通过以上两行代码就实现了4 * 4的网格划分了。不信，增加几个div数试一下。grid-gap用来控制网格的间距的，准确地说是用来控制网格区域的间距。