今天完成的事情：

1.任务七完成了一半

2.

明天计划的事情：

1.任务七做完

2.完成任务二的总结

昨天说的：头部本来做好了，结果一加上main，就往下掉，问题解决了。加上main之后：

这个问题，在头部css代码里面加个top：0；就可以了。因为加了定位却没给位置。

任务六也是加了定位，没给位置，为什么就可以不掉下来呢？大佬解释过，但是没明白，反正下次遇到这样的情况，多试试。也就试一两次的问题。

以后就明白这个问题了。

头部要想来回滚动不发生位置变化。加一个position：fiexd。这个用过很多次了。

收获：

1.关于水民和一号的九宫格问题，

一开始原本想，做一个正方形，用自适应的方式，宽25%，高25vw。结果里面的两个色块，高度不好调整，如果一个给80%的高，一个给20%的高，那么水民和一号这两个字，怎么垂直居中呢，因为没有一个明确的高度给它。

插一条，那个点击图片，可以播放音乐的方式，设置好了，用的js方式，直接在网上找的，然后放到项目里，用就行。还有那个小三角形，也做好了。

2.后来又给了固定的宽高，都是128px；这样倒是可以，中间的方块，用text-align: center;居中，两边的，用绝对定位固定一个向左，一个向右。但是后来旁边的师兄说这样不行，要自适应的宽度和高度才行，也就是高宽随着页面的缩放扩大缩小。

3.最后还是宽高自适应，不过我用的是两个组合起来，白色的边，上面的要上左右，下面的要下左右，组合起来就对了。

.blocksLeft {
width: 25%;
   height: 20vw;
   background-color: #f5c97b;
   margin: 30px 30px 0 30px;
   border-width: 4px 4px 0 4px;
   border-style: solid;
   border-color: white;
   position: relative; 
}

.blocksLe {
width: 25%;
   height: 5vw;
   background-color: #83b09a;
   margin: 0 30px 30px 30px;
   border-width: 0 4px 4px 4px;
   border-style: solid;
   border-color: white;
   position: relative;
}

垂直居中用这个方式：

.blocksOne {
position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   color: #5e5e5e;
   font-size: 20px;
}

.blocksTwo {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   color: white;
   font-size: 18px;
}

<div class="mains">
<div class="blocksLeft">
<div class="blocksOne">水民
       </div>
</div>
<div class="blocksLe">
<div class="blocksTwo">1号
       </div>
</div>
</div>

4.然后就是那个截图问题，就是鼠标悬停的话，会显示四个小图片的图：

切片，选定，转化为智能对象，编辑，然后鼠标拉边框调整大小。

以前都是用鼠标移动一个小图，来回拉动，然后转化智能对象。。。但是图多的话，还是要切片方式。

至于鼠标悬停，然后出现小图片，用hover方式。

这个还木有做完，今天做完。

进度：CSS任务七