今天完成的事情：

1.写出了头部和响应式导航栏

2.老大来分院座谈，下午和老大聊了一下午

3.用sass模拟了栅格布局，并成功套用，在任务8的css代码没有大的改动下写出了首页中的一个模块

明天计划的事情：

1.用纯css写出轮播图

2.这个任务的难点主要在拆分组件，模拟栅格布局，响应式导航栏，轮播图，明天完成轮播图后，争取一天完成任务14和15

3.准备小课堂

遇到的问题：

1.写响应式导航栏时，使用了表单中的复选框来模拟点击选取事件和再次点击放弃选取事件，用媒体查询实现不同视窗宽度下的不同显示效果

收获：

1.CSS3 animation 属性

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes 规定动画。 

animation 所有动画属性的简写属性，除了 animation-play-state 属性。 

animation-name 规定 @keyframes 动画的名称。 

animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 

animation-timing-function 规定动画的速度曲线。默认是 "ease"。 

animation-delay 规定动画何时开始。默认是 0。 

animation-iteration-count 规定动画被播放的次数。默认是 1。 

animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 

animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

2.js放在head 和放在 body 中的区别

body部分的js会在页面加载的时候被执行。

head部分中的js会在被调用的时候才执行。

浏览器解析html是从上到下的，如果把javascript放到head里的话，则先被解析，但这时body还没解析，所以会返回空值。这就说明了，如果我们想定义一个全局对象，而这个对象是页面中某个按钮时，我们就必须将其放入body中，如果放入head，定义时，那个按钮还没被加载，可能获得一个undefind.

那么JavaScript应放在哪里？

页面中的JavaScript会在浏览器加载页面的时候被立即执行，有时候我们想让一段脚本在页面加载的时候执行，而有时候我们想在用户触发一个事件的时候执行脚本。

（1） head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。

（2）body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

（3） body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本。

（4） 有时候你可能想在几个页面中运行同样的脚本程序， 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中，保存在扩展名为 .js的文件中。 注意:外部脚本文件中不要包含标记符<script> 使用外部脚本时将标记符<script> 的“src”属性值指向相应的.js文件就可以了。

3.js自定义函数

JavaScript函数能够给一系列代码指定名称，以便需要时，反复使用它们

function xxx(yyy, zzz){}

函数的定义以关键字function打头，接下来指定函数名如xxx，使用这个函数时，提供两项信息，这些信息被称为函数的形参，将其放入函数名后面的括号内，花括号内是编辑代码的区域，这些代码被称为函数体，将在我们使用函数时被执行。

这里引入了形参和实参的概念

形参(parameter):全称为“形式参数”由于它不是实际存在的变量，所以又称为虚拟变量。是定义函数名和函数体的时候使用的参数，目的是用来接受调用该函数时传入的参数，在调用函数时，实参将赋值给形参。因而，必须注意实参的个数，类型应与形参一一对应，并且实参必须要有确定的值。

实参(argument):

全称为"实际参数"是在调用时传递给函数的参数. 实参可以是常量、变量、表达式、函数等， 无论实参是何种类型的量，在进行函数调用时，它们都必须具有确定的值， 以便把这些值传送给形参。 因此应预先用赋值，输入等办法使实参获得确定值。

形参和实参的区别

形参出现在函数定义中，在整个函数体内都可以使用， 离开该函数则不能使用。

实参出现在主调函数中，进入被调函数后，实参变量也不能使用。

形参和实参的功能是作数据传送。发生函数调用时， 主调函数把实参的值传送给被调函数的形参从而实现主调函数向被调函数的数据传送。

（1） 形参变量只有在被调用时才分配内存单元，在调用结束时， 即刻释放所分配的内存单元。因此，形参只有在函数内部有效。 函数调用结束返回主调函数后则不能再使用该形参变量。 

（2）实参可以是常量、变量、表达式、函数等， 无论实参是何种类型的量，在进行函数调用时，它们都必须具有确定的值， 以便把这些值传送给形参。 因此应预先用赋值，输入等办法使实参获得确定值。

（3）实参和形参在数量上，类型上，顺序上应严格一致， 否则会发生“类型不匹配”的错误。

（4）函数调用中发生的数据传送是单向的。 即只能把实参的值传送给形参，而不能把形参的值反向地传送给实参。 因此在函数调用过程中，形参的值发生改变，而实参中的值不会变化。

（5）当形参和实参不是指针类型时，在该函数运行时，形参和实参是不同的变量，他们在内存中位于不同的位置，形参将实参的内容复制一份，在该函数运行结束的时候形参被释放，而实参内容不会改变。 而如果函数的参数是指针类型变量,在调用该函数的过程中，传给函数的是实参的地址，在函数体内部使用的也是实参的地址，即使用的就是实参本身。所以在函数体内部可以改变实参的值。

进度：css任务14

任务开始时间：2018.6.20

预计demo时间：2018.6.23

是否有延期风险：无

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