今天完成的事：

给页面插入下拉图标，单位换成vw完成自适应，完成了第二个页面，

明天计划的事：

完成任务7，进入任务8思考深度思考问题

遇到的问题：

雪碧图无法自适应，小图标无法和它上面盒的子两头对齐

雪碧图的原理是通过控制background-position属性值来确定图片呈现的位置，如果我们要求雪碧图随页面缩放的时候你会发现无法成功，接下来就要用下面的方法了：background: url(../../) no-repeat 0 0/100%或者background: url(../../) no-repeat 0 0/cover这两个都可以实现。

介绍background: url(../../) no-repeat 0 0/100%：

雪碧图的宽和高除以单个图片的宽和高，得出雪碧图是单个图片的多少倍，然后设置设置图片大小为：

17.46% 17.46%/450%; 这个数值是我的雪碧图宽高除以单个图片的宽高后得到的。

当以单张图片的大小设置元素宽高时，定位之后呈现出的刚好是和元素大小相同的图片，所以当用百分比单位设置元素宽高时，元素会随着页面放大，雪碧图也会跟着同比例放大。

小图标无法对齐

一开始是用相对定位调试，不过试了好几次都不行不是前面超出了就是后面超出了，经师兄指点在第一个图标css里加入margin-left:-1vw,第四个图标加入margin-right:-1vw;让两边的图标从父元素盒子两边脱离一部分

收获:

学会了设置随页面等比例放大的雪碧图技术；

学会了确定放大图片倍数的zoom属性；

学会了<audio>标签；