今日完成：今天用bootstrap 写任务7，写了一半了，还不太熟悉总有很多弄不好。

明日计划：继续重写任务7

遇到的问题：中间部分怎么也响应式不了。布局乱了。布局是用的四列啊，每列分的三分。

乱了，不晓得怎么回事，睡了，明天再来调

代码如下：

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div>
            <div class="circe">
                <span>1</span>
            </div>
            <span>
                匹配你现在的个人状况寻找适合自己的岗位

            </span>
            <img class="cierceimg" src="play7.png">
            </div>
        </div>
        <div class="col-md-3">
            <div>
            <div class="circe">
                <span>2</span>
            </div>
            <span>
                了解职业前景薪金待遇、竞争压力等

            </span>
            <img class="cierceimg" src="play7.png">
            </div>
        </div>
        <div class="col-md-3">
            <div>
            <div class="circe">
                <span>3</span>
            </div>
            <span>
                掌握行业内顶级技能

            </span>
            <img class="cierceimg" src="play7.png">
            </div>
        </div>
        <div class="col-md-3">
            <div>
            <div class="circe">
                <span>4</span>
            </div>
            <span>查看职业目标任务</span>
            </div>
        </div>
    </div>
</div>

.circe{

    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border-bottom: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
    position: relative;
     float: left;
    vertical-align: middle;
    margin-top: -7%;
    margin-right: 3%;
}
.circe span{
    position: absolute;
    left:43% ;
    top:35%;
    color:#29b078 ;
    font-size: 1.8rem;
    font-weight: 500;

}
.circe+span{
    display: inline-block;
    width: 60%;
    color: #999;
    vertical-align: middle;
    float: left;
}
.cierceimg{
    display: inline-block;
    width: 10%;
    float: left;
    vertical-align: middle;
}
.col-md-3>div{
    width: 99%;
}

今日收获：熟悉了点bootstrap的用法