今天完成的事情：

布局页面一

明天计划的事情：

把页面二结束并做到响应式，

把页面三布局部分，做到响应式。

遇到的问题：

之前布局页面的时候没有设置三段变化，导致也变化会很突兀。

对代码进行修改，做出多段变化，让页面变化变得让人接受。

收获：

页面的设计要考虑到用户的感受。页面在响应式变化的时候，要保证页面的变化不会太突兀。

之前对媒体查询一直都还是知识了解概念的状态。

这次布局试用了下媒体查询的用法，

@media all and (min-width:1000px)

可以通过媒体查询，设置在不同屏幕分辨率下不同的样式

@media screen and (max-width:992px) {
    .box2-box4 {
        background: url("S-img/user拷贝.png") no-repeat 0.1rem -4rem;
        background-size: 2rem;
    }
}

比如上面这段，在屏幕分辨率小于992px时，给盒子附加一个背景图片。

功能与:hover类似。可以给元素添加不同的样式。

只不过媒体查询的触发条件是屏幕分辨率。

:hover的触发条件是鼠标悬浮在元素上方时。

媒体查询用于页面排版等页面结构变化

:hover的触发条件是鼠标悬浮在元素上方时。用于页面中某一功能的变化。

:hover 与 :focus 

:hover  当鼠标悬浮在元素上方时，向元素添加样式。

:focus 向拥有键盘输入焦点（元素获得光标焦点时）的元素添加样式。

margin负值在页面布局中有哪些应用：

对于自身的影响：当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度。

margin-top为负值不会增加高度，只会产生向上位移

margin-bottom为负值不会产生位移，会减少自身的供css读取的高度

进度：task8

任务开始时间：2018.5.22

预计结束时间：2018.5.29

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-687.html