今天完成的事情： 

根据师兄的提醒修改了任务7的细节

1.头部居中问题，在头部标签里面同时使用justify-content: space-around;align-items: center;就可以解决

2.制作的时候要严格按照ps图的规格来做；任务界面3的字体与边框处的距离没有按照比例进行制作：

明天计划的事情：做任务8

个人脑图：

官方脑图：

任务总结：

任务7就是前面6个任务的z综合运用，

第一个界面：头部就使用到了再任务6里面学得到的利用css来体现出图标的三条横杠，不在单纯的使用贴图了。

主体部分使用flex的布局的居中来就可以了，不过在这花的时间挺长的，各种检查重构，最后发现单词搞错了T.T（细心好很重要）。

在第一个界面的三角形一开始绝对挺简单的  css编译出来然后绝对定位就好了，后来在师兄的提醒下回来检查了一下，左右的移动没有问题，

上下它就动了，调试了半天使用了相对定位然后固定的像素改成%就好了，如果是使用固定的会随着页面的变化它会固定不变，然后放对所需要对应的父类框就好了。

第二个界面：这个界面的头部不居中，

在左上角的按钮里面使用过flex的属性以为在他的上一级继续使用就会发生冲突就使用调整margin的来达到视觉效果的居中，

请教了一下师兄可以在外面套个盒子使用justify-content: space-around;就可以达到居中的效果了

音频文件的插入：

开始想的是把音频缩放到图标大小然后隐藏在后面的，不过发现缩小的同时它的按钮也跟着没了

，

然后就看了下师兄的日报发现播放器倒着放

就可以实现点击播放的效果了（解锁新姿势了transform还可以这样使用），然后调整到播放按钮的位置进行隐藏就好了

下面的三角形开始天真的以为可以用css写出这样的对话框请教师兄没想到是搞个三角形拼上去的

在制作九宫格的时候遇到点击出现下拉的效果的问题，使用display: none;进行隐藏后， 添加了hover但是没有任何效果，

请教师兄一波，使用hover的时候要到相应的父类里面，界面2点击的时候需要出现下拉选择的效果，

就需要把选择图标放在上一级水民的盒子里面，然后在css里面使用hover

界面三：这个界面问题不大，需要注意的是底部透明度的调整，和设置背景图一样的在对应的框background-color: rgba（）;