今天完成的事情：

         1.用flex布局重新设计了任务4并提交。header用justify-content:space-between来布局，很简单，不过，后面再次运用时发现，space-between也未必一定可以让中间的div居中。当两边的div宽度不同时就不会。因为：

• space-between：两端对齐，项目之间的间隔都相等。

                      2.用flex布局了task7页面2的头部和主体。

明天计划的事情：

                            1.完成任务7第二个页面的设计，开始第三个页面

                             2.学习hover用法；完成投票页面注意每个玩家的方块上，hover时会出现4个操作选择

遇到的问题：

                     还是垂直居中的问题。对于父元素：{vertical-align：middle；line-height:height值；}子元素{display：inline-block；}的用法。因为我的自适应正方形是百分比设置的，即.box{width：30%；height：0；padding-bottom：30%；}height值为0，故line-height无法设置。事实上，vertical-align：middle也确实不生效。  查看很多资料，最后将width用vw为单位，这样解决了问题。可是当窗口足够小的时候，字体又会溢出，这又引出了字体自适应的问题，百度有JS解决的，也有媒体查询的，暂未解决。
收获：

                  对于flex布局的掌握熟练了些。