今日完成的任务，任务七首页界面的制作

今日收获：

1.在处理圆角的时候遇到的属性

-webkit-border-radius 是为了兼容 chrome 或 safari。

-moz-border-radius 是为了兼容火狐。

这两个都是处理圆角效果的，但不是w3标准的。

w3标准的是border-radius。

2.在flex布局里。如果主轴由命令row转为column，需要设置高度才能让justify-content的排列生效，因为默认宽度是浏览器宽度，而高度是没有的

3.隐藏audio播放进度条，只保留播放按钮的方法

 （1）添加音频控件autoplay="autoplay

 （2）设置宽高只剩播放按钮定位到想要的地方设置成完全透明，可以选择用 rgba透明或者opacity

4.学习鼠标悬浮在一个盒子上时，其下方出现另一个盒子的方法

（1）使两个盒子（box1,box2）都在另一个大的盒子(box)里，这时box1和box2是兄弟关系，使box2隐藏.

        隐藏有两种方法。display：none;和visibility:hidden；

        display：none;使元素隐藏并且元素不占据原来位置，从文档中消失，它下边的元素会上移。

        visibility:hidden；使元素隐藏，它占据原来的空间，它还在原来的位置只是不显示，它下边的元素不会上移。

       设置.box2{visibility: hidden;}隐藏，之后让鼠标悬浮在box1时出现box2，设置.box1:hover~ .box2{visibility：visible}，这时鼠标放在box1上时就会出现box2。

（2）：使一个盒子（box1）包含另一个盒子(box2)，此时这两个盒子是父子关系，设置.box2{visibility: hidden;}隐藏，之后让鼠标悬浮在box1时出现box2，设置.box1:hover .box2{visibility：visible}，这时鼠标放在box1上时就会出现box2。

当两个盒子是父子关系时设置.box2{visibility: hidden;}

                                            .box1:hover .box2{visibility：visible}

当两个盒子是兄弟关系时设置

                                           .box2{visibility: hidden;}

                                           .box1:hover~ .box2{visibility：visible}

当两个盒子是兄弟关系时须加这个~符号，否则没有效果。

4.明日计划，完成第二个页面。