今天完成的：

      因任务发现些问题，未能通过。现已完成任务。

      对任务13和14做了一下总结。

明天计划的：

      开始学习JS，攻略JS任务。

      了解JavaScript数据类型、逻辑运算符、条件语句和循环语句。

遇到的问题：

      今天主要解决的是轮播图的问题。因为想要使用纯CSS来制作轮播图，昨天百度了一些写法，参考一个结构相对简单的来写了一下。不过缺点就是不可控制（交互），只是一个幻灯片似的动画。

     通过 input【radio】来控制图片（动画）解决了该问题。不过因为原本方法的代码不好改动，所以使用了别的方法。

今日收获：

      学写了animation动画效果。要用到@keyframes。

      @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

      相比于transition，animation可以增加关键帧的节点，来制作较为复杂的动画效果。

      轮播图的几种方法。

      第一种（不能控制显示第几个）：

      原理：将五张图片叠加放到一起，通过控制 opacity 来显示某张图片。制作一个动画，让每张图片显示五分之一的时间（包括过渡），然后进行延迟播放，间隔4秒。这样5张图片就会交替出现。然后同理设置一个获取焦点的动画（底部的小白点）。因此动画的轮播图和焦点是分离、同步的，二者除了显示时看着同步之外，没有什么关系，仅起到一个提示作用。

      （参考链接：https://www.jianshu.com/p/28643f36011e）

      第二种（通过 radio 的 checked 状态来控制动画/轮播图）：

      原理：设置五种动画效果，分别从第一张开始、第二张开始以此类推，然后让底部的“焦点”来控制播放哪个动画，以起到点击“焦点”能跳转到该轮播图的目的。

      （参考链接：https://codepen.io/lucifier/pen/DicEn）

     了解了一下通过js获取浏览器宽高、元素尺寸的方法：

        通过浏览器获得屏幕的尺寸：

          screen.width

          screen.height

          screen.availHeight //获取去除状态栏后的屏幕高度

          screen.availWidth //获取去除状态栏后的屏幕高度

        获取浏览器窗口内容的尺寸：

//高度

window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

//宽度

window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht

/ * 

 * window.innerHeight  FF/CH 支持，获取窗口尺寸。

 * document.documentElement.clientHeight  IE/CH支持

 * document.body.client  通过body元素获取内容的尺寸

* /

        滚动条滚动的高度：

       document.documentElement.scrollTop || document.body.scrollTop

     获取元素的尺寸：

        elemnt.offsetWidth

             elemnt.offsetHeight

任务总结：

任务名称：CSS任务13

成果链接：https://hanxiaoran906.github.io/testgit/Project/Tasks/Task13/Task13.html

任务耗时：7.4~7.6  共计3天

技能脑图：

      个人脑图：

      官网脑图：

任务总结：

        a.任务进度符合预期，无延期。

        b.这个任务的主要目标是增加sass的熟练度，以及按照规范来规范代码，培养一个良好的编程习惯。之外就是要熟练页面布局。

        c.重新写任务七的过程中布局没遇到什么麻烦，因为之前都写过一遍，思路还是比较清晰。

           在写sass的时候，就是把常用到的、或经常出现的样式提取出来，创建变量或者混合宏来进行调用，能简化代码，提高效率。

           第一个页面的侧边相比任务七多了一个菜单栏，需要通过一些方法隐藏、显示。当时写的时候思路不是特别清晰。大概思路跟做护工页的下拉选项是一样的，使用ul，然后隐藏，通过别的操作（如hover，active等）触发显示。之后又了解到一种方法，通过 input【checkbox】的checked的状态来控制侧边列表。

           在使用 button +JS 的时候要注意判断条件（我写的是通过判断侧边栏的状态控制）要写对显示状态的判断，若写对隐藏状态的判断，则第一次会不起作用。

任务名称：CSS任务14&15

成果链接：https://hanxiaoran906.github.io/testgit/Project/Tasks/Task14&15/Task14.html

任务耗时：7.7~7.11  共计5天

技能脑图：

      个人脑图：

      官网脑图：

任务总结：

        a.任务进度符合预期，无延期。

        b.这个任务的主要是学习拆分组件，不用bootstrap框架，重新用sass写一遍任务8、9。通过拆分组件使网页结构易于维护和合作开发，通过这个任务提前接触了组件化思想，为以后学习js做好准备。

        c.遇到的问题有：之前任务8、9使用bootstrap写的响应式导航栏、栅格布局、面包屑导航以及轮播图，现在要自己挨个实现一遍。

           因为头部、导航栏和底部在三个界面中是一样的，便可以写好之后拿来组件直接使用。

           响应式导航栏通过媒体查询以及 checkbox 控制768px以下时出现的隐藏导航栏来实现。

           “职业介绍”页面的表格，使用 div 互相嵌套模拟的表格，用到了 float 和 flex。

           面包屑导航栏没什么难度，直接用 ul、li 模拟就好了。

           轮播图的话遇到不少麻烦，好好学习了一下 transition、animation 动画，然后通过 input【checkbox】来控制点击事件。