一、今日完成的情况

       1、写完任务8的正文页面，调整优化三个页面的代码，提交给师兄检查。

       2、梳理深度思考。

二、明天的计划

       1、修改三个页面存在的问题，再进行任务提交。

       2、总结任务8-9，还有几个深度思考未梳理完，继续总结。

三、遇到的问题

       1、按钮点击后蓝色边框无法消除，使用了outline：0；或者outline：none；和伪类：focus都无法解决，且点击后图片消失。

           。

             解决办法：没找到解决办法，最后把button换成了<a>标签来设置了这个部位。

        2、太急躁了，总想着尽快把任务昨晚，一天都在敲代码，没有留出学习的时间，师兄也指出来了这一点，这样做的后果，就是导致最近的日报写不出什么内容，收获较少。

             解决办法：每天还是要调整好时间分配，要做任务，也要学习理论知识。

        3、任务8-9的页面，经过师兄检查后，有如下问题，记录下来，以便明天进行修改。（1）页眉和导航栏没对齐；（2）导航栏没设置高亮效果；（3）导航栏的图片没有居中，且和导航栏的菜单当分辨率过小时会有错位的现象；（4）导航栏和下部的图片没有边框；（5）下部的背景图片过大；（6）元素没有使用阴影效果，且局部阴影是圆角；（7）部分文字应该设置为h；（8）职业页面的图片介绍过大，且隐藏的图片没有垂直居中，padding设置不够；（9）footer的链接下划线过长；（10）企业页面的链接没有下划线；（11）职业页面的下部文字不同；（12）导航栏有竖向滚动条；（13）职业页面的左侧一栏，文字未居中（呃，这个我用IE和chrome打开都是居中的，咋回事...）。 问题较多，记下来免得明早遗漏了。

四、收获

        1、如何实现轮播图？任务八和九涉及到的轮播图主要是利用 Bootstrap 框架中的样式来设置轮播图。

              （1）轮播图需要的部件由三部分组成：图片、计数器和控制器。

              （2）步骤：1>.在顶部head标签里引入外部JQuery和Bootstrap库文件，把JS文件放在body标签底部。

                                  2>.设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。

                                  3>.设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，作用是显示当前图片的播放顺序(根据图片的数量决定放置几个li)，一般采用有顺列表来制作。

                                  4>.设计轮播图片播放区。轮播图整个效果中，播放区主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片，第一张图片需要添加一个“active”类，默认页面加载时显示第一张图片。

                                  5>.设置轮播图片描述。可以在每个图片上还对应有自己的标题和描述内容。利用 Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中加一个名为“carousel-caption”的div的类，即可图片底部添加对应的代码。为了美观，可以将图片的宽度设置为100%。

                               6>.设计轮播图片控制器。为轮播图片设置一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control样式配合 left和right 来实现。其中left表示向前播放，right表示向后播放。

          2、如何用css写一个简单的幻灯片效果页面？

               有三个属性可以用来制作动画效果：Transform，Transition，Animation。可以对元素的位置、大小等属性进行设置，来达成幻灯片的效果。 本次任务使用了轮播图来起到幻灯片的的效果，未使用上诉三个属性来设置，后续任务涉及到再深入探究。

          3、主流浏览器内核有哪几种？

              （1）Trident内核，常见于IE内核，是微软开发的一种排版引擎。（2）WebKit内核，常见于chrome浏览器，是一个开源项目，特点在于源码结构清晰，渲染速度快，缺点是对网页代码的兼容性不高。（3）Gecko内核，常见于火狐浏览器，是一款以C++编写的开源网页排版引擎。

          4、什么是外边距重叠？重叠的结果是什么？

               边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。外边距的重叠会对页面的布局造成影响。

         5、div+css的布局较table布局有什么优点？

                 TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局。

              div+css布局较table布局的优点有以下几点：（1）符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。（2）布局精准，网站版面布局修改简单。（3）提升了网页访问速度，div+css布局较传统的Table布局，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。（4）节约站点所占的空间和站点的流量。（5）有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。（6）浏览器兼容性较好 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。

         6、bootstrap有哪些常用组件？

              常用的组件有：（1）轮播图；（2）下拉菜单；（3）响应式导航栏；（4）栅格布局（row、col-*-*）；（5）表单；（6）按钮。目前做任务中涉及到的常用组件，其他尚未使用过的组件，待日后任务中遇到再详细研究。

任务进度：

任务八-任务九

任务开始时间：

2018.05.10

预计任务完成时间：

2018.05.15

禅道：http://task.ptteng.com/zentao/project-task-679-unclosed.html