完成的事情：

学会了雪碧图的制作和使用方式，https://www.toptal.com/developers/css/sprite-generator     用了这个在线的雪碧图合成网站，并给出了每个小图标在雪碧图中的位置，使用background-image:  url(task6sprite.png) -.2rem -.2rem; image和position来选择需要显示的图片，position属性可以和image属性简写在一起。图片的垂直居中使用了position:absolute, 

top:50%

transform:translatey(-50%);

tranlatey（-50%）数值是以元素自身的高度来进行的偏移。

使用了两个button 按钮并撑起了父元素的高度，给垂直居中使用了父元素的padding-top/bottom.

尝试使用css模拟了下拉框，只要是使用display:inline-block、 display:none 和伪类hover, 给下拉框需要显示的部分设置inline-block和hover {display:block;} 下拉框的选项部分设置display:none，鼠标悬停在下拉框时，hover的display:block生效，选项部分呈现，离开时消失。

明天计划的事情：

完成任务六，整理任务六用到的知识并巩固。

遇到的困难：

在做下拉框部分的时候，查到的资料很多都是使用使用css进行修改<select>元素，后者是css模仿下拉框的过程及其复杂，看过之后没有发现关键点在哪里。如果只是不同的模仿普通下拉框，使用 display:inline-block、 display:none 和伪类hover就可以达到。

收获:

学会了雪碧图的制作和使用方法，对背景图片的定位方式更加熟悉，可以使用css来进行下拉框的模拟。