今天完成的事情：

1.页面一快搞定了，完成五分之四了，用了框架果然快多了

2.任务五修改完成，还要继续修改，没来得及

明天计划的事情：

1.把任务八的第一张图完成。

2.第二张图完成

收获：

1. 昨天的右边定宽，左边自适应虽然没搞好，不过用了bootstrap框架之后，

很快就搞定了

<div class="container"> 这个算是和盒子功能差不多
    <div class="row"> 算是一行，如果两行，就复制一个row
        <div class="col-xs-6 col-sm-3 col-han">  
            <div>
                <img src="media/rocket.png">
            </div>
            <h4>高效</h4>
            <p class="col-p">将五到七年的成长时间，缩短到一年到三年。</p>
        </div>

加了一个col-han

.col-han{
    width: 21%;
    text-align: center;
    margin: 40px 2%;
}

.h4, h4{
    margin: 2rem 0;
    font-size: 1.8rem;
    font-weight: 400;
    color: black;
}

还有col-p

.col-p{
    text-align: left;
}

2.然后就是右边，根本不用采取定宽自适应了，直接加一个类，加上边显示就行。

.rightEight{
    width: 21%;
    text-align: center;
    margin: 40px 2%;
    line-height: 3rem;
    color: #3c3c3c;
    border-left: 0.1rem dashed #3c3c3c;
}

3.然后就是如何学习下面的，直接复制两行就行。

还有就是垂直居中：

.col-han-4{
    width: 25%;
    margin: 30px 0;
    padding: 0;
    display: flex;
    align-items: center;

这样，箭头，文字，圆圈，就在一条线了。

4.那个数字放在圆圈里，一开始我用了绝对定位，但是后来那个1老是在圆圈的外面，后来删掉绝对定位，用line-height和text-align：center。

.circleEight {
    display: inline-block;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    border: 0.1rem solid #3c3c3c;
    background-color: white;
    color: #19af77;
    text-align: center;
    line-height: 5rem;
    font-size: 1.6rem;
}

5.然后就是优秀学员了，真的太慢了这个页面。。。拖太久了。。。

进度：CSS任务八

任务代码地址：任务五代码已经提交  （还需要再修改。。。还没来得及。。。）

任务六：https://kewangbuji.github.io/cssTask/task6/task6.html

任务七：https://kewangbuji.github.io/cssTask/task7/task7Test.html

https://kewangbuji.github.io/cssTask/task7/task7Result.html

https://kewangbuji.github.io/cssTask/task7/task7Homepage.html