今天完成的事情： 

任务14继续写。今天把三个页面的组件都写完了。完成了页面一的pc端，自适应还没调。

研究下如何实现栅格，先定一个栅格框container，参考了bootstrap使用的是媒体查询每一个宽度，设定最大宽度，

避免繁琐的媒体查询，直接设置宽度90%，margin-left/right：auto，container还有一个padding-left/right为15px，row有一个负值抵消，搜索了一下是为了方便嵌套，先去掉。

给row样式为：display：flex；flex-wrap：wrap；

设置换行w-100：width：100%!important;

看了下bootstrap设置了全局

虽然知道border-box的属性，暂时没明白为什么要把伪类after和before加入。

设置col为{max-width：100%，flex-basis：0；（初始宽度）flex-grow：1（等比缩放）}

分配各个col-n的最大宽度，设定所有column宽度为100%，一个基本栅格的框架就出来了。

剩下的就是媒体查询添加各个自适应，在使用到的时候再行添加。

明天计划的事情： 

完成任务14，调好自适应。

遇到的问题和收获：

修复了昨天没解决任务13position：fixed和lable无法互动的问题（脱离文档导致无法与checked互动）

取消把顶部导航固定在视窗顶部，转换思路main使用overflow：scroll（auto也行），设定高度，让内部超出高度的元素滚动，overflow之前一直用的hidden，没注意到其他属性的效果。

在写组件库的时候，把三个页面所有的组件一起写了进去，忽略了组件的复用性，独特的组件也许需要单独写在页面css里。

写轮播图的时候，如果要设定每张图片100%的宽度的话，需要把图片盒子设定为100%×图片张数，

然后图片的宽度应该写100%÷图片张数（三张为33.33%），第一次使用的时候，设定的三张图片，图片盒子300%宽度，图片宽度为100%，导致三张图片竖着排列一起滑动，且需要给展示盒子加一个overflow：hidden，不然会被撑开300%宽度。