今天完成的事情：

1、task7的三个页面写好。

2、task8的图片切好。
明天计划的事情：

1、修改task7.

2、开始task8。
遇到的问题：

1、关于ta's'k7的audio的应用问题，在师兄的指点下，学会用js代码控制音频的播放。把我们切的图片放在一个button标签中。用这个button来控制音频的播放暂停，对于audio标签只需要引入其路径，不需要在设置其属性。

var myAudio = document.getElementById('audio1');    

function playPause(){       

 if(myAudio.paused){ myAudio.play(); }

else{            myAudio.pause();    }   

      } 这是js的代码，其中audio1是audio标签的id，而myAudio是

<button onclick="playPause()"><img src=""></button>

button标签中的点击事件。

收获：

1、了解audio标签，audio顾名思义是定义音频，

以上是audio的各个属性，controls属性设为controls会出现浏览器的播放、暂停，音量等控件，不过每个浏览器出现的控件却不一样。不过我们也可以自定义控件。这样我们需要自己去写js代码，不过对于js我们还没有接触，可以了解下。讪笑

2、关于深度思考的第一问.

CSSSprites(css雪碧图)在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。、

引入雪碧图的原因:加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

雪碧图的原理：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优点：1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，

      2、2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

      3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

      4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

缺点：1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

      2、CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。

      3、由于图片 的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

3、什么是浮动？怎么清除浮动？

在css中我们通过对元素设置其float属性，使元素脱离文档流并且使‍‍浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动最初设计的目的仅仅是为了实现像Word中文字包裹图片的效果。浮动具有破坏性（破坏原有内联框的布局）和包裹性（父级盒子浮动包裹子级盒子）。浮动框不属于文档中的普通流， 当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样， 当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上， 像浮云一样，但是只能左右浮动。

所谓的清除浮动，准确的说的是清除浮动带来的影响，譬如上述的高度塌陷。

清除浮动的方法：1、为父元素设置一个高度（这个高度足以包裹浮动后子元素），只适合高度固定的布局，对于像移动端布局之类的不建议使用。

2、在父元素‍‍结尾处加空div标签 clear:both 。添加无意义标签，后期维护困难，不建议使用。‍

3、‍‍父级div定义 伪类:after 和 zoom ‍‍

‍‍.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfix：{zoom:1} ‍‍

建议使用，不过对于初学者来说较难掌握。

4、‍‍父级div定义 overflow:hidden 。‍‍

‍‍原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 。

优点：简单、代码少、浏览器支持好 

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用‍‍。 

5、‍‍父级div定义 overflow:auto 。‍‍

必须定义width或zoom：1，同时不能定义height，使用overflow：hidden时浏览器会自动检测浮动区域的高度。

不推荐使用，因为当浮动区域高度超过父级div的高度时，会出现纵向滚动条。

6、父级div也设置float属性。

这种方法不可取，因为在布局过程中不可能所有的盒子都设置浮动，而且需要一直设置到body。会出现许多问题，所以不推荐使用。

7、父级元素设置为display：table。

盒属性已发生改变，‍‍将div属性变成表格会产生新的未知问题。
建议：不推荐使用，只作了解。

‍‍‍‍以上为 清除浮动的方法。‍

‍