今天完成的事情：

汉堡菜单的实现，自动轮播图的实现，渐变属性学习，页面一自适应写完，页面2完成，组件基本完善。

看了下任务15，需要写一个汉堡菜单，自适应的汉堡菜单研究如何实现：

看了几个不同的实现方法，修真院主页的实现方法，使用浮动来进行布局，通过清除浮动和block的特性来使他们排成一列，

bootstrap使用弹性盒子，媒体查询时高度0，overflow：hidden隐藏多余部分推开盒子。

看了bootstrap设置了全局border-box；搜索了下好处：

全局设置 border-box 更符合我们通常对一个「盒子」尺寸的认知。，其次它可以省去一次又一次的加加减减，它还有一个关键作用：让有边框的盒子正常使用百分比宽度。但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突，不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决。

学了些关于渐变属性

https://www.w3cplus.com/content/css3-transition

明天计划的事情：

任务14,15完成，可以准备js的学习了。

遇到的问题和收获：

模仿bootstrap使用浮动写汉堡菜单，但是出现一个问题，菜单本身是脱离文档流的。检查了下代码是原本的导航栏设定了高度。

在写汉堡菜单渐变属性的时候，使用transition属性，隐藏菜单使用的display：none；这两个属性有冲突，设定的渐变高度，若没有display：none导致内部的文字直接处于中间显示，设定了display：none后渐变失效，想了一段时间，使用overflow：hidden；把高度设定为0进行隐藏，但是绑定的checked需要设定具体高度，不然不会有渐变效果，即使是height：auto也不行。

想半天如何把上面的小字和下面的container两边对齐，因为使用的flex盒子，column排列，aline-iteam属性没法调控左右两把对齐，发现有个aline-center，相当于水平排列状态的justify-center。

其他的基本都是以前遇到的老问题进行处理，难点基本解决，还差一个轮播的小圆点没研究。