今天完成的事情：

完成任务14页面2、页面3。

1.谷歌存在最小文字尺寸

Banner自适应过程英文大小存在最小尺寸，因此转化为图片插入完成自适应。

2.表格

border-collapse: collapse;  

设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。

table-layout: fixed;

设置表格布局算法，列宽由表格宽度和列宽度设定。

使用css分离设置不同样式，直接根据表格内容需要选择类名调用相对应的属性值。

3. hover动画效果

利用animation实现不同动画效果。

明天计划的事情：

开始JS基础知识学习。

遇到的问题：

表格的边框，如果没有设置border-collapse: collapse属性，单元格之间默认存在空隙，边框会分开显示。

收获：

任务名称：css-task-14/15 任务总结

成果链接：https://lareina-wzy.github.io/test/task14/task14-1/html/task14-1.html

任务耗时：2019.11.08 - 11.12(4天)

官网脑图：

 我的脑图：

任务14/15主要内容是自己编写栅格框架，css模块化（拆分组件库），尝试css分离。

1.编写栅格框架

我用sass的for循环设置栅格1-12列不同布局，同时给container设置不同视口的最大宽度。编译后如右图，使用时用link链接frame.css文件调用。

for循环 from 1 to 12，取值为1≤$i＜12，to后的数字不在取值范围内，需要12列，因此循环取值写为 from 1 to 13，或者from 1 to 12.1等。

2.css模块化、css分离

将css文件拆分出组件库之后，能够增加css文件的重用性，比如三个页面共用的header、footer部分，拆分后可直接调用。

常用css属性分离出后，在HTML中调用对应类名就能够使用，能够增强css属性的重用。

3.导航

导航使用媒体查询实现不同视口宽度不同效果，点击效果我用input+label实现。

4.轮播图

轮播图可以用animation实现滚动播放。

或者用input（radio）+label实现点击跳转