今天完成了什么：

完成第二张图头部样式。

明天计划完成什么：

完成第二张图，上手第三张图。

今天遇到了什么问题：

一开始做的时候用的都是浮动和定位，导致后面的盒子都往上挤，每个盒子都需要用到定位这些搞得很麻烦。

发现有边框没覆盖满。检查后是给盒子设置了固定的宽才导致这样。

使用左右居中添加空的div后使其等分对齐，但是无法使文字往做靠拢一些。师兄指导后才知道把空的div去掉也能等分对其，然后再给文字盒子加上margin就可以。

总的来说今天遇到的都是布局问题吧，一开始布局错误，导致整个头部都是用的绝对定位和相对定位以及浮动这些，虽然能达成效果，但是代码不好维护，所以重新组织布局。头部固定一开始忘记固定导致整体坍塌，后面才添加position：fixed和top：0rem；

回来仔细研究了下代码，确实跟以前的一模一样...可能做题的时候短路了，现在看一下子就懂了。只不过一开始抽象了点用图片加播放按钮重叠这样子来设置，可能是没想到竟然用这么土的方法来设置？心里想着那些网上的很多页面企业秀之类的不可能是我这样子设置的吧，所以大跌眼镜一时半会没搞懂现在看了下代码实际就是那会是，只不过是多了个透明和right的负值而已。步骤如下，布局大盒子，这大盒子设置相对定位作为绝对定位盒子的参照物，小盒子设置音频标签，设置大盒子宽高加入雪碧图，小盒子设置宽高，透明图前期不要设置为0，为了看得清楚后期再设置，设置小盒子绝对定位，添加right负值，配合绝对定位使用，f12不断调试大小即可。

收获了什么：

布局上能用会在弹性盒子用弹性盒子，方便快捷少用浮动和定位来布局主体内容。

了解到opacity属性是从0到1，0是透明，1是不透明。并且该属性是会作用于子元素，导致子元素也是透明。任务的时候雪碧图一直没找到，以为没引用正确，才知道是该属性覆盖了样式。

头部布局实际上就是我们任务一的九宫格。第一排的三个盒子布局目前学到三种方法：

一 最方便的弹性盒子布局等分对齐。display：flxe，jusitify-content：space-between；align-items：center；

二：使用相对和绝对定位，但发现不是那么好用。

3：使用display：inline-block；