今天完成的事情：

完成任务8页面三

1、利用table表格属性完成布局。

2、完成table表格内部内容填充对齐

Text-align属性、浮动、position、flex串联使用。

3、利用CSS完成简单动画效果

Hover+transition实现

Animation动画效果：

4、页面内导航定点跳转

a标签+ id定位

明天计划的事情：

开始任务10，熟悉表单属性。

遇到的问题：

1、hover效果的动画，反复激活hover效果产生动画延迟重复。

Transition属性移到hover值里解决。

2、div盒子在表格内的垂直对齐

3、英文换行

英文文本默认长单词不换行。

解决方法：word-break:break-all;只对英文起作用，以字母作为换行依据

收获：

4、表格单元格宽度

单元格按跨行跨列分布后，宽度并未按比例计算。

设置table-layout:fixed后解决。

收获：

任务总结：

任务名称：CSS-task8/9

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

任务耗时：　2019.10.28–10.31（4天）

官网脑图：

我的脑图：

任务总结：

             刚开始接触bootstrap时，会觉得需要不同效果要使用不同类名繁琐，但熟悉应用之后，bootstrap的网格系统在布局上很方便，定好框架之后就只需要注意各个部分的小布局。做任务的时候，页面一不熟悉bootstrap，各种小问题花了两天多解决，页面二和页面三尝试用不同的布局方式搭建，期间导航和表格动画额外花了一些时间。总体上来说，bootstrap熟练之后，对使用bootstrap框架布局更快更顺手。

1. bootstrap的网格系统

bootstrap通过行row和列col形成更方便的自适应布局框架。

2.自适应布局的过程里，常用%、rem、em、calc()完成。

3.css完成的简单动画

有过渡动画transition、动画animation（@keyframes）

hover也可以完成简单的交互效果

4.表格table

table-layout:fixed  + 跨行跨列 能搭建不同宽度单元格组成的表格。