-------------这是任务7的日报-----------

完成的事情：

1.排版

1.1、带凸出小三角的div、气泡框

http://www.cnblogs.com/daxiong/articles/3158630.html

1.2、hover时“弹出”其选项，---------用hover时显示-------移开后隐藏来处理

display: none; /*默认隐藏*/

.player:hover .options {
    display: flex; /*鼠标移上去就出现*/
}

1.3、纯CSS实现文字一行居中，多行左对齐的方法

https://www.cnblogs.com/xiaobuxiong/articles/5694486.html

说白了就是两个盒子相互嵌套，里面的盒子text-align: left，这个用于换行后左对齐，

外面的盒子text-align: center， 这个用于让里面的盒子整体居中。

1.4、有些按钮用超链接做，去除下划线

a:link, a:visited {
    text-decoration: none; /*超链接无下划线*/
}

1.5、task7-3里面footer要求背景透明，按钮不透明，

则两者间不能有父子关系，否则opacity会继承。

所以，得把背景独立成一个div，用z-index保证它后置。

1.6、task7-3，多行文字局部左对齐，整体居中：

将多行文字合为一个div，宽度由文字撑开，这就得让宽度脱离父级的继承，方法2种。

法1 
/*    width: -moz-fit-content;        下面3行是利用fit-content水平居中
    width: fit-content;
    margin: auto;*/
    
法2 
display: inline-block; /*我更倾向转化成inline-block来实现居中，这样宽度就不会继承了。注意！block的宽度会继承父级，在这里体现为填满整行，无法居中*/