任务7收获： 

PS：Ctrl+F,按住不放，点击多个图层再按F2可合并图层。

hover用法

1. 中间什么都不加  控制子元素；

2. ‘+’ 控制同级元素（兄弟元素）；

3. ‘～’ 控制就近元素；

 opacity设置元素透明度，值从0-1.数值越大，透明度越低。——子元素跟着透明

rgba（255，255，255，.5）——对子元素无影响。

z-index值设置元素的堆叠顺序，数字越大，显示越靠前。

避免页面滑动时，header元素被绝对定位元素遮盖。

前面加上display： table；或者display: inline-block;且有同级元素参照，

vertical-align: middle;才有效。

CSS中的 white-space 属性设置如何处理元素内的空白。

normal    默认。空白会被浏览器忽略。    

pre    空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。    

nowrap    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。    

pre-wrap    保留空白符序列，但是正常地进行换行。    

pre-line    合并空白符序列，但是保留换行符。    

inherit    规定应该从父元素继承 white-space 属性的值。

css绘制小三角图标代码：

width: 0;
height: 0;
overflow: hidden;
border-width: .5rem;
border-color: #b9e9f5 transparent transparent transparent;
border-style: solid dashed dashed dashed;
position: relative;
top: 0;
left: 3rem;

还不是很了解。

 <button  class="btn"  id="a" onclick="a();"> </button>
    <audio id="music" src="财富自由.mp3" autoplay loop="loop"></audio>
</span>

播放音频js代码，网上复制的。（放在body之后）

<script>
    function a(){
        var audio = document.getElementById('music');
        if(audio.paused){
            audio.play();//audio.play();// 播放
        }
        else{
            audio.pause();// 暂停
        }
    }
</script>