今天完成的事情：

1.任务七完成了四分之三

2.

明天计划的事情：

1.任务七做完

2.

基本都解决了

收获：

1.今天学了不少东西，首先是如何自适应做好了。还是做了一个大盒子，大盒子不给高度，用上面和下面的两个色块填充。

.blocksZong {
    width: 25%;
    margin: 4%; 加起来25*3+4*6=99
    text-align: center;
    float: left; 左浮动，
    overflow: hidden;  清除浮动，不是为了清除本级的，是为了清除下面的浮动，子级浮动。
}

填充颜色，一个百分之19.5，一个百分之五，数字是根据25%的宽度来的。

.blocksLeftOne {
    background-color: #f5c97b;
    width: 100%;
    height: 19.5vw;
    position: relative;
}

为了保证字体垂直居中，用了left：50%；top：50%；命令。

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

2.然后就是比较难的，让鼠标悬停，显示出来图片。

.img_wrap {
    margin-top: 5px;
    padding: 5px;
    text-align: center;
    /*display: none;*/
    opacity: 0;
    pointer-events: none;
}

一开始，采取的是display：none。display：block方式。

 .blocksLeft:hover ~.img_wrap {

            opacity: 1;

        }

我点谁显示图片，类在前面。~是同级元素，如果子级元素不需要这个~。。img_wrap是将要悬浮的图片的限制条件。

但是这样的话，整个页面会晃来晃去，因为none了之后，不占用文档流空间了，所以出来图片，下面的方块要让出来地方，就会一上一下。

所以最后还是采取了透明不透明的方式，即便是视觉上看不见，依然占用空间。

3.然后第二张图，以前没弄好的一个点，就是字体加粗的问题，原来有很多命令，一开始用的bold。

后来用lighter又太细。最后换成了数值400.

4.还有一个就是字体左对齐的方式：

<p align="left">太棒了！你知道么？在捉鬼游戏中只有20%的卧底取得游戏最终的胜利哦！</p>

就用align=left的方式。

5.弄一条边框线：

border-bottom: 1px #74d4eb solid;

1是宽度，颜色，实线。

6.为了不缩放的时候，色块掉下来，所以宽度高度用了百分比，但是边框本身有宽度，所以把边框的宽度算在总宽度之内，用以下的命令：

box-sizing: border-box;

进度：CSS任务七