今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

一、开始轮播图的制作。

首先查资料看了下轮播图怎么制作，发现可以用css3中的animation：动画 属性和@keyframes 规则来写。

然后了解了animation属性以及它的八个动画属性和值；

（7）animation-play-state： 规定动画是否正在运行或暂停。默认是 "running"。

2、@keyframes 规则

定义及使用说明：

通过规则可以创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

所以这里需要和animation动画属性一起使用。写法：

animation-neme：img-item

@keyframes img-item {

     0% {

            top：0px；

}

100% {

           top：0px；

}

}

好了，现在开始第一步，首先要确定轮播图的框架，大体可以分为两层，这里我用ul和li元素来写的。

第一层是展示容器；

第二个是装图片的容器。这里需要注意的是展示容器的宽高必须和图片大小一致。

html结构如下：

所以写到这里就碰到一个问题，因为是写响应式，所以需要图片自适应。这里我用的是background背景图片的写法，所以如果不设height图片就不会显示，但是定高后就会有一个问题，图片不能自适应了。如图：

这里我设的height：4rem，所以在缩小屏幕的时候高度是固定的，不能做到自适应，所以这里不能用height这个属性。但是不设高图片出不来怎么解决呢，所以这里就卡了半天，最后去看了下师兄的代码，后面发现居然可以用padding这个属性来撑background-image的高，对于没这么用过的我表示操作还挺多。之前做任务的时候老是遇到定宽定高的问题，所以某位已经溜回家的师兄建议最好不要给父盒子定宽高，让子级自己撑开内容。所以这里用padding属性可以代替图片的高度，因为width设的是百分比，所以给padding我试着使用百分比，发现是可行的，百分比单位子级是可以继承的。

  前面说了展示容器和装图片的容器宽高必须一致，所以这里我给ul和li的class类名同时设了padding-bottom。

明天计划的事情：（一定要写非常细致的内容） 

继续轮播图的动画属性制作。

遇到的问题：（遇到什么困难，怎么解决的） 

在查看animation属性的时候，看到很多写轮播图的例子，然后在写的时候不是很理解background背景图片后，怎么让图片能够横着通过animation属性去制作动画效果，然后发现大部分是用float来写，但是用float后脱离了文档流，图片就不见了，然后实在是不懂为什么会这样，就重新去看了下自己前面用的bootstrap插件的代码，发现可以用绝对定位来改变图片的位置，然后再用animation的动画的几个属性。明天用绝对定位看看怎么写。

收获：（通过今天的学习，学到了什么知识）

使用background-size属性设100%可以让图片做自适应的效果，和padding属性可以一起使用。