今天完成的事情：

学习了将头部和底部固定在屏幕上下方的方法。

除了position: fixed;之外，由于脱离文档流，还要额外设置

  top: 0;(如果是固定在底部就是bottom: 0;)

  max-width: 640px; 

  width: 100%;

  z-index: 999;

除此之外，紧邻着固定头部下方的元素要添加

  margin-top: 88px;

以免和头部重合。

学习了audio标签的用法。

  <audio src="" controls="controls" preload hidden id="music"></audio>

明天计划的事情：

完成任务8

遇到的问题：

task7的雪碧图部分，background-size: 400%; 为什么要设为400%？因为<li>的宽度是25%？

background-position若用px则为负数，若用百分比则为正，这两种用法的具体区别是什么。

2.未能实现滚动条，我在日报里找到了一个实现了滚动条的成果展示，设置了

  body{overflow: hidden;}

  .main-middle{

    overflow-y: auto;

    overflow-x: hidden;

}

  .main-middle::-webkit-scrollbar {...}

  .main-middle::-webkit-scrollbar-thumb {...}

  这些我都设置了，但是滚动条就是不出现。。。

在师兄的指点下设定main-middle的高度为定值320px，同时把滚动条的高度也做了调整，body也改为overflow: hidden;，滚动条终于出现了。main-middle的高度不同，拉动滚动条显示出的结果也不同，高度越大，最下面一排box被底部遮挡住的部分就越多。

收获：

学习了雪碧图的制作和使用。

下载安装了CssGaga，将切好的四个小图拖进去就自动生成了雪碧图出来。