今天完成的事情

任务7第一个个页面完成，第二个页面鼠标画上去显示四个小图标还没完成

明天计划的事情

研究任务七剩余部分

遇到的问题

1.第一个页面下面4个小圆圈不会做。问了四个小圆圈放在一个盒子里，给盒子定宽水平居中，四个小圈设置display: inline-block，然后定宽高

2.第二个页面头部用了固定定位，开始给图标和文字用margin让其下移，导致头部变高，页面向上滚动时下面字会显现出来，后来给文字和图标用决定定位调整；中间九宫格式参考了任务一实现，但文字垂直水平居中试了大半天，最后用flex布局display: flex;align-items: center; justify-content: center实现

3.第二个页面第二部分那个倒三角，切图定位，但颜色不对

4.第二个页鼠标滑动方格上出现的四个小图标还不会

收获

1.对固定和绝对定位有了深入了解，绝对定位是相对与最近的定位元素而言，固定定位相对于根元素定位

2.水平垂直居中的另一种方法：若父元素有宽高

a.子元素有宽高的话，先给父元素定位（固定/绝对/相对），让子元素绝对定位，子元素偏左上50%，然后设置margin-left和margin-top等于子元素宽高一班的负值

  b.子元素没有宽高的话，先给父元素定位（固定/绝对/相对），让子元素绝对定位，子元素偏左上50%，然后用transform: translate(-50%,-50%)实现

     <div>
      <div>12345</div>
</div>

样式 .tt{
    background: #83b09a;
    width: 400px;
    height: 600px;
    position: relative;
}
.red{
    position: absolute;
    background-color: red;
    /*width: 100px;*/
    /*height: 80px;*/
    left: 50%;
    top: 50%;
    /*margin-left: -50px;*/
    /*margin-top: -40px;*/
    transform:translate(-50%, -50%);
}

3.<audio>标签。属性controls，值为control显示控件，比如播放按钮；属性autoplay，值为autoplay该属性，则音频在就绪后马上播放。属性通过值url指定播放音频的位置

4..opacity与 rgba属性。.opacity规定不透明度。值从 0.0 （完全透明）到 1.0（完全不透明）设置透明度，子元素会继承，而rgba属性子元素不会继承

5..clare:both清浮动与气泡框有了点了解，还没完全弄清楚

气泡框：.second:after{
    content:'\00a0';
    width:0;
    height:0;
    display: block;
    border-style:solid;
    position: absolute;
    border-width:10px;
    border-color:#b9e9f5 transparent transparent transparent;
    /*z-index:-1;*/
    top:124px;
    bottom:-30px;
    left:50px;

6.画圆圈：border-radius: 50px