今天完成的事情：1 搞懂了雪碧图的合成及在页面中的使用

                             2 知道了精灵图在页面中如何控制大小

                             3  了解了如何引用bootstrap

明天计划的事情： 将任务六提交

遇到的困难：

1     在线合成雪碧图网址

https://www.toptal.com/developers/css/sprite-generator

        雪碧图定位网址

http://tools.jb51.net/code/css_sprite

切记在合成雪碧图之后，建议重命名，因为名字不符合规矩，都要吐血，死活都不显示图片

‍‍2    CSS Sprite精灵图如何缩放大小‍‍

• transform:scale( x ): 
  语法为:transform: scale(x,y). 同时有scaleX, scaleY专门的x, y方向的控制。 
  例如:transform: scale(0.5) 缩小为原来的一半 
  和zoom不同,scale并不支持百分比值和normal关键字,只能是数值。而且,还能是负数,没错,负数。而zoom不能是负值!
• zoom:x 
  例如:zoom:0.5 也是缩小为原来的一半

zoom和transform:scale的差别是:、

（1）:在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染,而scale只是在当前的元素上重绘。意思是,当你给一个div固定宽高时,scale变化的时候,其原本的宽高还是不变的,你给div height200px,width:200px, scale(0.5)即为缩小为原来的一半时,他的height和width还是200px, 只不过里面的元素缩小了而已。因此,就没有layout的重计算。

（2）:但是zoom牵一发动全身,zoom:0.5后 ,width和height就变成了100px。