今天完成的事情：

今天完成了任务八的第三张图，早上的时候开始研究网格布局的用法，昨天大致看了怎么用的，但是写的时候比较困难，没写出来，今天开始写。

首先就是分份的问题，

grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
grid-template-rows: 10rem 3rem 3rem 2rem 2rem 2rem 3rem 3rem;

我先把竖线分成了十份，横线分成了八份，然后按照ui图的距离每个都给了一个尺寸，这样每个块需要的距离就差不多分出来了，然后就用

grid-column-start:
grid-column-end: 
grid-row-start:
grid-row-end: 

来控制每个需要占用多少距离，单位可以用数字1到11来表示。首先上面两个代码是列的开始和结束，下面两个是行的开始和结束，按照事先写好的尺寸用1到11来分就可以了，开始从哪到哪，结束从哪到哪。

弄明白网格布局是怎么分份之后后来的就不难了，后面可以说是比较顺利的，中间的过程就不在赘述，先来看看我弄好之后的效果：

这个就算是写好了，跟ui图效果差不多。

用网格布局写完之后就是动画效果的问题，，经师兄提醒用到的是css中的动画效果keyframes cartoon 

翻译过来就是关键帧动画，百度了他的用法，就是鼠标点上去就开始执行动画效果，鼠标点上去用到的是hover，后来的动画就是keyframes cartoon 开始起作用，代码是这样的：

@keyframes cartoon {
0%{
-webkit-transform: rotateX(0deg);
   }
100%{
-webkit-transform: rotateY(2000deg);
   }
}

 就是从0开始到效果结束。其实也挺简单的。

写完之后复制粘贴row就可以了，然后就开始用栅格布局来给他们分份，由于之前用过所以弄的还是比较快的，没有遇到什么大麻烦，body之后把之前写好的尾部代码复制过来，任务八就这样写完了。

明天计划的事情：明天计划提交任务八，然后开始写任务九。

遇到的问题：已经写到上面去了。

收获：

         学会了网格布局。

          认识到了动画效果keyframes cartoon 。