今天完成的事情：任务二初步完成，测试栅格布局失败。
明天计划的事情：完成任务7。
遇到的问题：没什么大问题。
收获：

自适应布局（Adaptive Layout） 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。 2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

响应式布局（Responsive Layout） ——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。  响应式几乎已经成为优秀页面布局的标准。  1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。  2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。  优点：适应pc和移动端，如果足够耐心，效果完美  缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度。

自适应布局在不同的屏幕分辨率下看起来都是一样的，仅仅是大小发生了变化；

响应式布局在不同屏幕分辨率下看起来不一样，会随着屏幕的变化而变化，（随着设备的改变而改变展示样式，不会根据设备采用不同的展示样式）

hover是伪类选择器。

:hover 选择器用于选择鼠标指针浮动在上面的元素。 

提示：:hover 选择器可用于所有元素，不只是链接。 

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。 注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

任务总结：

任务名称：CSS=TASK6

成果链接：https://tinklegcy.github.io/css/task6/hugong2.html

任务耗时：2018.7.12-2018.7.17，延期，延期两天

技能脑图：

个人脑图：

官方脑图：

任务总结：任务六学习了雪碧图的制作，知道了下拉框的用法，对flex布局有了新的认识。对定位不是很熟悉的了解。这次任务没有用bootshop做，尝试用框架再试一下。更深入认识属性的知识。

通过display：none设置为不显示选框；：hover 鼠标悬浮在按钮上；white space：no wrap；超出页面不换行  overflow：hidden；超出文本隐藏  text-overflow：ellipsis；超出文本部分生成省略号；position：fixed；top：0；bottom：0把header和footer定位到顶部和底部。

1. 1.         任务进度不符合预期，延期，原因是还没来报名线下，经常被各种事耽搁，不能静下心来去学习，来线下就要努力了。