今天完成的事:

1.今天主要是完成了任务七的三个页面的代码优化和页面修改。

2.使用<a>标签将任务七的三个页面联系在一起实现鼠标点击后跳转到其他页面。

3.对任务七的结果页面的页脚处理半透明： 使用RGBA 对页脚进行透明化处理.

4.适配移动端，不同设备下访问页面显示正常。

5.通过在任务七学会的一些知识，对之前任务的代码进行修改。

6.通过搜索引擎学习深度思考中的一些问题；

（1）什么是css sprites ？使用css sprites有什么优，缺点？

css sprites ：即精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量。

优点：
         1、减少网页的HTTP请求，提高页面性能
         2、图片命名上的困扰
         3、更换风格方便
缺点：
          1、必须限定容器大小，符合背景图片元素的位置，需要计算
          2、维护比较麻烦

使用步骤：
           1、制作一张具有多状态的拼合图片，需要按照一定规律处理
           2、给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示
           3、通过背景图定位（background-position）控制不同的显示状态

（2）什么是浮动？那些方法可以清除浮动？

             浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来  

             浮动 float属性值：left、right、none

 常见的清除浮动的方法、
（1）.clear属性
left:元素左侧不允许有浮动元素
right:元素右侧不允许有浮动元素
both:元素左右两侧均不允许有浮动元素

none:默认值，允许浮动元素出现在两侧

（2）、父级div给出固定的高度。手动定义height，这样就解决了父级元素获取不到高度的问题。

优点：代码量少，简单容易掌握。

缺点：只适合高度固定的布局，如果高度和父级div不同会出现问题。

（3）、overflow，设置overflow：hidden。

优点：代码少，浏览器支持。

缺点：会把超出的部分隐藏起来，而且不能配合position使用

（4）、额外标签，添加一个新的标签，如div，或者br，并且设置标签的属性clear：both；清除浮动，让父级能自动获得高度。

优点：代码少，浏览器支持，不会各种问题。

缺点：会有很多空的div或者br。

--------------------------------------------------------------------------------------------------

7.一直以来对于什么是响应式布局都不明白，今天抽空学习了一下；

什么是响应式布局：

      响应式布局是最近几年在前端开发中非常火热的词，它是相对于固定像素大小的网页而言的，那么CSS响应式布局到底是什么？顾名思义，响应式布局就是网页能够响应各种各样不同分辨率大小的设备，能够将网页很好的呈献给用户。

响应式布局的核心是：通过媒体查询来加载不同的css

什么是CSS媒体查询：

把这段css代码添加到你的网页中，然后缩小浏览器，你会发现网页的颜色会伴随着你的浏览器宽度变化而变色，这就是css的媒体查询功能，根据浏览器视口宽度的不同来加载不同的css样式。

当然我们完全可以使用link方式，写成如下：

<link rel="stylesheet" media="screen and (min-width:800px)" href="800wide.css" />

这样就是表示只有视口宽度大于800像素的屏幕设备才会加载800wide这个css文件。

bootstrap：Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

栅格体统：（刚开始学习）

明天计划的事：学习bootstrap，栅格系统及其他内容。尝试进行任务八。

遇到的问题：暂时没有遇到什么问题

收获：完成任务七，学会对页面半透明处理，添加<audio>及<hover>的使用。