今天完成的事情:

1.修改任务8，9

2.写任务10；

3.运用表单页；切图与制作雪碧图；

    明天计划：

1.完成任务10；

2.复习前面的知识；

    遇到的问题：

调整bootstrap下拉菜单时的小问题

    收获总结：

1.学习linear-gradient() 函数：

linear-gradient() 函数用于创建一个线性渐变的 "图像"

CSS 语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

取值：

direction:角度值指定渐变的方向（或角度）

color-stop1, color-stop2,.:用于指定渐变的起止颜色

2.响应式、自适应、移动的区别：

响应式和自适应的关系很密切，经常二者是互通的。响应式通常意味着对待任何变化，反应更积极更快。

而自适应往往是应对一个新需求或是情况的被动反应，例如变化。响应式设计应对不同因素的变化，都会

很流畅自如，例如设备宽度。而自适应设计会基于一定的因素搭建。将二者结合是一种理想化，提供一个完

美功能模式的网站。

3.任务8&9的任务总结:

链接：http://new.wiki.jnshu.com/pages/viewpage.action?pageId=23102534

任务名称：CSS任务8&9

成果链接：https://zzzheli.github.io/task8/task8-1.html

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

技能脑图：

      个人脑图：

      官网脑图：

任务总结：

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

        b.任务8&9完成要点：框架方面：学会运用bootstrap框架，其中包括响应式导航栏，轮播图，栅格布局，按钮框。布局方面：需要运用媒体查询做响应式布局，通过不定宽加自适应进行页面布局。CSS样式方面：选择器的运用：类选择器，相邻兄弟选择器，子元素选择器等等相互搭配使用才能发挥出更好更便捷的效果。flex盒子：flex盒子的功能十分强大，其中的排列方式，布局方式，换行与否的设置等等都十分实用，运用好flex对于完成任务占有重要影响。媒体查询：媒体查询设置好相应断点的不同的样式才能将网页做到响应与否，配适于不同尺寸的设备。剩下的零零散散关于CSS圆的绘制，页面跳转，半透明，自定义颜色 背景设置......都是CSS中的基础，运用好基础知识才能更好的完成任务。

        c.关于任务中遇到的一些问题：

       1. 媒体查询使用时断点设置出现了点问题，导致到设备断点的时候页面布局效果不理想。   

        解决方法：断点设置应该合理，根据具体的布局来写。

        2.PC端页面与响应式布局的先后权衡：之前写任务的时候，没有考虑清楚它们的先后顺序，边写页面边配置响应式，导致调整了很久 消耗了比较多的时间；其实应该先写好PC端的总体页面布局，再来慢慢配置响应式媒体查询，这样做起来就比较快捷方便。

        解决方法：PC端页面与响应式布局的先后权衡：先写总体页面布局再配置响应式。

        3.修改bootstrap框架中的样式：之前不知道如何去自定义bootstrap框架中的样式

      解决方法：查看其bootstrap框架中的源代码，或者使用开发者模式查找bootstrap框架中的相应样式。

       4.bootstrap轮播图的运用及其原理：之前引入bootstrap的代码做起来很简单，但是其具体的原理没有搞清楚。

        解决方法：查看官网教程运用轮播图，查看其bootstrap框架中的源代码查找轮播图的工作原理。

        5.flex盒子运用：之前对于flex的比较陌生。

        解决方法：查看相关教程了解到flex的6个主属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
  了解了相关的属性之后运用起来就很熟悉了。