今天完成的：

        完成了任务八3个页面的样式修改，提交了任务8、9。

        任务十开了个头。

明天计划的：

        看一下任务八、九的深度思考。

        了解一下bootstrap的常用组件，以及幻灯片效果的实现。

        开始码任务十。

遇到的问题：

   >>下拉菜单下的内容不能跟随下拉菜单的动画滑动。

        解决办法：经过一点点排查发现，是因为将导航栏设置了固定宽度，导致动画无法实现。将固定高度设置为最小高度即可即可解决。

   >>在屏幕宽度接近断点的时候，右边会出现一点白边。

        问题原因：因为导航栏的ul为了跟顶部的按钮对齐，向右移动了一段距离，超出了导航栏。

        解决办法：导航栏设置overflow：hidden。

   >>轮播图的两边跳转的箭头，在下拉菜单出现的时候高度会变高包住下拉菜单。之前尝试了一种粗暴的方法，将下拉菜单的z-index值设的非常高，就会浮在其他层之上，盖住轮播图的两边的箭头。不过，效果很差，又寻找了其他解决办法。

        问题原因：bootstrap框架默认属性会带有before、after伪元素。而我在设置样式时将其删掉了，破坏了bootstrap框架，导致出现bug。

        解决办法：将before、after的display：none；样式去掉即可解决。

   >>关于在段落中出席那连续的英文字符的时候，浏览器默认不进行打断，会导致段落中可能会有大量留白。

        解决办法：使用 word-break 进行打断，使单词（长段英文）在行结束强行打断。（在本次任务中我使用了空格将连着的几个词用空格间隔了，虽还会有少许空白，不过影响不大，感觉效果还行。）

今日收获：

        解决了昨天遗留的疑问，找到了问题所在。

        了解了一下flex的兼容性，在旧版IE（10之前）不支持flex，IE10需要加私有前缀-ms-。在一些属性上，新老版本浏览器也有不同。

        （可参考：https://www.cnblogs.com/zhongfufen/p/6424189.html）

任务总结：

    任务名称：CSS任务8/9

    成果链接：http://118.126.113.248/jnshu830/Task8.html

    任务耗时：6.24~6.29  共计6天

    技能脑图：

        个人脑图：

        官方脑图：

    任务总结：

        a.符合预期，没有延期。写任务的时候，还是要多动手，多多实践才能发现并解决问题。

        b.关于HTML5新标签、属性，css3的新功能，以及自适应布局需要多多了解一下。

        c.在这个任务中了解了媒体查询的用法，了解了一些HTML&css常用的布局，学习了一些关于自适应的知识。因为此次任务中用了不少flex进行布局，更熟悉了flex布局的使用。学习了一下编码规范，还有师兄的教诲，之后要把类名整理清晰，写样式的时候条理也会清晰一些，之后调整也会轻松很多。

         遇到的问题有“职业”页面的职业信息有个表格制作，在制作的时候绕了些弯路，都使用了栅格系统、table布局以及div，期间主要遇到的问题就是分格的问题，有几个格子占比不一样。在了解了一下栅格系统后，还是使用了栅格进行布局。

          在做响应式的时候，为了让内容在屏幕宽度较窄的时候也能有个良好的阅读体验，需要将内容换行来保持内容的大小。解决换行的问题时，使用了flex的换行属性 wrap 。

          还是这个“职业”页面。因为需要设置一个hover样式，出现一段内容。这个地方，想了两种方法，一种是display：none ，一种是用高度变化展示一个动画效果。为了体验稍好一点使用了地儿个，不过碰到个小问题，因为开始设置里面的内容时，使用的padding来控制的样式，然后想让height变成0的时候，就无法实现。最后用margin来控制段落的显示位置。

          还有别的几个问题在上边的日报里已经写明了。