今天完成的事情：

                          1.完成任务六，将图片放到按钮里，将三个下拉菜单的样式设置好。如下：

                        2.学习3个div居中的方法，一种是用box装起来（对div设置display：inline-block）对父元素设置margin：0 auto； 另一种是父元素设置display：flex;justify-content:center; 即用flex布局。

                       3.学习并练习使用了flex布局的属性。

                                       对父元素设置：display：flex；  flex-direction； flex-wrap； justify-content； align-item;

                                      对子元素设置：order；  flex-grow； flex-shrink；flex； align-self；

                                     参考资料链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

                        4.完成任务7版本选择页面的布局，如下图：

明天计划的事情：

                          1.书写任务7第二个页面，速度快得话也开始第三个页面的书写；

                          2.学习hover的用法和如何实现半透明； 
遇到的问题：

                        1.边界重叠导致像素变粗。 解决方法：设置margin：-border；

                        2.引用bootstrap的下拉菜单，三个菜单均显示在最左边。 解决方法：给相应的menu增加一个类名，设置position:left;即可。
收获：

                       可以增加类名来给特定的对象单独设置样式，在重复项多的时候采用可以节省很多代码。

                       flex布局是一种完全不同的布局方式。传统的基于盒子模型的display、position、float的布局方式，是不容易设置垂直居中的。