今天完成的事

1.将github上因为文件名首字母大写而无法引用的图片删掉

重新将更改好文件吗的图片文件push到GitHub上

2.将图片引入战略合作企业部分中

.img8 {
    background-image: url("alibaba.png");
    height: 176px;
}
.img9 {
    background-image: url("jinshanyun.png");
    height: 176px;
}
.img10 {
    background-image: url("huanxin.png");
    height: 176px;
}
.img11 {
    background-image: url("ronglian.png");
    height: 176px;
}
.img12 {
    background-image: url("qiniu.png");
    height: 176px;
}

3.修改样式调整图片的显示

.img8 {
    background-image: url("alibaba.png");
    height: 160px;
}
.img9 {
    background-image: url("jinshanyun.png");
    height: 160px;
    background-position: 0px 20px;
}
.img10 {
    background-image: url("huanxin.png");
    height: 160px;
    background-position: 0px -10px;
    background-size: 228px;
}
.img11 {
    background-image: url("ronglian.png");
    height: 160px;
    background-repeat: no-repeat;
    background-position: 0px;
}
.img12 {
    background-image: url("qiniu.png");
    height: 160px;
    background-repeat: no-repeat;
    background-position: 0px;
}

4.在友情链接部分将栅格系统改为十等分

.div7 {

}
.div7..col-xs-1-5,
.col-sm-1-10,
.col-md-1-10,
.col-lg-1-10 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.col-xs-1-2,
.col-sm-1-2,
.col-md-1-2,
.col-lg-1-2 {
    width: 20%;
    float: left;
}
.col-xs-1-1,
.col-sm-1-1,
.col-md-1-1,
.col-lg-1-1 {
    width: 10%;
    float: left;
}
@media (min-width: 768px) {
    .col-xs-1-1,
    .col-sm-1-1,
    .col-md-1-1,
    .col-lg-1-1 {
        width: 10%;
        float: left;
    }
}
.div6@media (min-width: 992px) {
    .col-xs-1-1,
    .col-sm-1-1,
    .col-md-1-1,
    .col-lg-1-1 {
        width: 10%;
        float: left;
    }
}
.div6@media (min-width: 1200px) {
    .col-xs-1-1,
    .col-sm-1-1,
    .col-md-1-1,
    .col-lg-1-1 {
        width: 10%;
        float: left;
    }
}

5.引用冲突 造成战略合作企业部分布局错误

修改十等分栅格系统的类名解决

将

.col-xs-1-1,
    .col-sm-1-1,
    .col-md-1-1,
    .col-lg-1-1 {

改为

.col-xs-2-1,
.col-sm-2-1,
.col-md-2-1,
.col-lg-2-1 {

6.写好友情链接部分并居中加粗

<div class="container">
    <div class="row div7">
        <h5 class="col-xs-2-10 text-center"><strong>友情链接 </strong></h5>
    </div>
</div>

7.完成友情链接部分的架构

<div class="container">
    <ul class="row div7">
        <h5 class="col-xs-2-10 text-center"><strong>友情链接 </strong></h5>
        <li class="col-lg-2-1 col-sm-2-1 col-md-2-1">
            手机软件
        </li>
        <li class="col-lg-2-1 col-sm-2-1 col-md-2-1">
            教师招聘
        </li>
        <li class="col-lg-2-1 col-sm-2-1 col-md-2-1">
            找工作
        </li>
        <li class="col-lg-2-1 col-sm-2-1 col-md-2-1">
            教师招聘
        </li>

8.外包一个容器并调整样式完成友情链接部分

.footer0 {
    width: 100%;
    background-color: white;
    margin-top: 100px;
}
.div7 {
}
.col-xs-2-10,
.col-sm-2-10,
.col-md-2-10,
.col-lg-2-10 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.col-xs-2-2,
.col-sm-2-2,
.col-md-2-2,
.col-lg-2-2 {
    width: 20%;
    float: left;
}
.col-xs-2-1,
.col-sm-2-1,
.col-md-2-1,
.col-lg-2-1 {
    width: 10%;
    float: left;
    margin-top: 10px;
}
@media (min-width: 768px) {
    .col-xs-2-1,
    .col-sm-2-1,
    .col-md-2-1,
    .col-lg-2-1 {
        width: 10%;
        float: left;
    }
}
.div6@media (min-width: 992px) {
    .col-xs-2-1,
    .col-sm-2-1,
    .col-md-2-1,
    .col-lg-2-1 {
        width: 10%;
        float: left;
    }
}
.div6@media (min-width: 1200px) {
    .col-xs-2-1,
    .col-sm-2-1,
    .col-md-2-1,
    .col-lg-2-1 {
        width: 10%;
        float: left;
    }
}

9.简单架构footer部分

<footer class="footer">
    <div class="container">
        <div class="row">
            <p class="col-lg-2-2 col-md-2-2 col-sm-2-2">
                技能树—改变你我
            </p>
            <div class="col-lg-offset-2-1 col-sm-offset-2-1
                      col-md-offset-2-1 col-xs-offset-2-1"></div>
            <p class="col-lg-2-2 col-md-2-2 col-sm-2-2">
                旗下网站
            </p>
            <br/>
            <div class="col-lg-offset-2-3 col-sm-offset-2-3
                        col-md-offset-2-3 col-xs-offset-2-3"></div>
            <p class="col-lg-2-1 col-md-2-1 col-sm-2-1">
                草船云孵化器
            </p>
            <p class="col-lg-2-1 col-md-2-1 col-sm-2-1">
                最强IT训练营
            </p>
            <br/>
            <p class="col-lg-2-2 col-md-2-2 col-sm-2-2">
                关于我们 | 联系我们 | 合作企业
            </p>
            <div class="col-lg-offset-2-1 col-sm-offset-2-1
                        col-md-offset-2-1 col-xs-offset-2-1"></div>
            <p class="col-lg-2-1 col-md-2-1 col-sm-2-1">
                葡萄藤轻游戏
            </p>
            <p class="col-lg-2-1 col-md-2-1 col-sm-2-1">
                桌游精灵
            </p>
        </div>
    </div>
</footer>

10.调整样式

.footer {
    width: 100%;
    background-color: rgb(27,163,110);
}
.col-lg-offset-2-1,
.col-sm-offset-2-1,
.col-md-offset-2-1,
.col-xs-offset-2-1 {
    width: 10%;
    float: left;
    margin-top: 10px;
}
.col-lg-offset-2-2,
.col-sm-offset-2-2,
.col-md-offset-2-2,
.col-xs-offset-2-2 {
    width: 20%;
    float: left;
    margin-top: 10px;
}
.col-lg-offset-2-3,
.col-sm-offset-2-3,
.col-md-offset-2-3,
.col-xs-offset-2-3 {
    width: 30%;
    float: left;
    margin-top: 10px;
}

今天完成预览

明天计划的事

1.调整footer部分的样式布局

2.补齐一些在其他分辨率下的栅格系统布局

3.开始第二个页面

遇到的问题

收获

1.对于栅格系统的理解和使用更进一步