今天完成的事：

一、学习了animation制作轮播图

@keyframes intro-carousel {
  0% {margin-left: 0}
  10% {margin-left: 0}
  33% {margin-left: -100%}
  43% {margin-left: -100%}
  66% {margin-left: -200%}
  76% {margin-left: -200%}
  100% {margin-left: -300%}
}

animation: mycarousel 10s ease infinite;

在@keyframes content {}中，百分比代表的是动画的时间，从0-100%就是完整的动画

要做轮播图，就需要设置好时间节点，用负margin拖动元素实现

infinite是循环的意思，让动画可以循环播放

二、完成了任务14的第一个页面

使用sass进行代码重构

将header和footer作为组件，和全局变量放在一个scss文件中

在sass文件标注注释的时候，出现提示

GBK字符的问题

在scss文件添加

但是依然报错，原因是字符必须放在文档的顶部

遇到的问题：

容器被图片撑开时，容器的高度大于图片高度

原因：没有设置

vertical-align: middle;

这是bootstrap中的全局设置，一开始没有发觉，但脱离框架后，发现了该问题

明日计划：

完成任务14/15

收获：

脱离了bootstrap以后，发现了很多问题，比如img元素默认的vertical-align:middle;盒子默认的box-sizing:border-box;

比如img会撑开包裹他的盒子，因为img的baseline问题，盒子要比img高几个px，所以vertical-align:middle;显得非常重要