今日完成的任务：

1.完成了任务八的第一个页面

2.重写了一个十栅格的栅格系统

@media (min-width:1200px) {

    * {
        box-sizing: border-box;
    }

    .container1:before,
    .container1:after,
    .row1:before,
    .row1:after {
        content: "";
        display: table;
    }

    .container1:after,
    .row1:after {
        clear: both;
    }

    .container1 {
        width: 1170px;
        margin: 0 auto;
    }

    .colu-lg-1, .colu-lg-2,
    .colu-lg-3, .colu-lg-4,
    .colu-lg-5, .colu-lg-6,
    .colu-lg-7, .colu-lg-8,
    .colu-lg-9, .colu-lg-10 {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }

    .colu-lg-1 {
        width: 10%;
    }

    .colu-lg-2 {
        width: 20%;
    }

    .colu-lg-3 {
        width: 30%;
    }

    .colu-lg-4 {
        width: 40%;
    }

    .colu-lg-5 {
        width: 50%;
    }

    .colu-lg-6 {
        width: 60%;
    }

    .colu-lg-7 {
        width: 70%;
    }

    .colu-lg-8 {
        width: 80%;
    }

    .colu-lg-9 {
        width: 90%;
    }

    .colu-lg-10 {
        width: 100%;
    }
}

参考了一下bootstrap的源码，用来做任务八的五个图片部分和下面的10个友情链接部分，暂时还挺简陋，没法实现平移和一些比较细的功能，而且padding和margin也有一些地方需要改进。

明日计划完成的任务：

完成任务8-2，把任务7提交，一直忘了提交，再学习一下后面的知识

遇到的问题：设置的4col-md-6，第三个栅格向右平移，第四个栅格掉入第三行，解决方法是把设置一个相同的height，暂时原因还不清楚

将包裹图片的div设置成text-align之后图片无法居中，处于右方四分之三的位置，原因是没有设置div class=”row“ 

收获：对于bootstrap的理解更加深入，页面构图更加熟练