一、今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

出了一段时间差，回来赶紧把任务10安排掉。没有任务8、9那么大型，但也很考验对响应式布局的掌握程度。

主要时间花在微调上，对响应式效果反复修改，直到自我感觉用户体验能入眼了为止。

学了一点less，为任务11做个铺垫。less顾名思义，是优化CSS代码用的，“write less, do more”。

二、明天计划的事情：（一定要写非常细致的内容） 

如果任务10没有什么问题，准备开始任务11: 基于css的更高级语言——使用less/sass重写任务4（登录页），并编译。

感觉会是个大工程。

三、遇到的问题：（遇到什么困难，怎么解决的）

1、footer无法保持在页面底部：

CSS：

当屏幕缩小后，footer被顶到页面中部

解决方法：

注释掉“position：absolute；bottom：0；”反而正常了。

但弊端是当网页main部分内容较少时，无法把footer顶到页面底部。

目前没找到两全其美的解决方法。

2. 为什么navblock变窄后，里面的button和select（首页、在线定制等）不会自动换行排列，而是始终保持同一排撑开页面宽度，造成溢出视口？

给navblock设置display:flex; flex-direction:column; 也不会自适应屏幕宽度换行排列。

解决方法：

为了实现响应式设计，只能设置成垂直排列，如图。但看起来还是不够美观

3. select选项文字内容无法居中，如图：

4. 屏幕变窄后，流程图自动换行，右边空出不足一行的宽度。如图:

解决方法：

要保持流程图始终在页面右侧，只需要给流程图设置宽度：

效果如下：

四、收获：（通过今天的学习，学到了什么知识）

练习表单控件，练习响应式布局，练习bootstrap。

对于响应式设计，敲代码是一方面，更重要的是思路。不同终端下如何更美观地展示页面，需要前端人员有基本的设计思维。