今天完成的事

1.依据师兄的建议 调整布局细节

1）给优秀学员部分添加属性

margin: 0px;

2）给战略合作企业添加属性

margin: 0px 30px;

初步完整布局细节调整

2.调整战略合作企业部分的样式 并使它们可以自适应缩小和响应式改版布局

div class="container">
    <div class="row div6">
        <div class="col-xs-5-1 col-sm-5-1 col-md-5-1 col-lg-5-1 img8"></div>
        <div class="col-xs-5-1 col-sm-5-1 col-md-5-1 col-lg-5-1 img9"></div>
        <div class="col-xs-5-1 col-sm-5-1 col-md-5-1 col-lg-5-1 img10"></div>
        <div class="col-xs-5-1 col-sm-5-1 col-md-5-1 col-lg-5-1 img11"></div>
        <div class="col-xs-5-1 col-sm-5-1 col-md-5-1 col-lg-5-1 img12"></div>
    </div>
</div>

background-image: url("alibaba.png");
height: 160px;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;

@media (min-width: 0px) {
    .col-xs-5-1 {
        width: 100%;
        float: left;
    }
}
@media (min-width: 425px) {
    .col-sm-5-1 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5-1 .col-lg-5-1{
        width: 20%;
        float: left;
    }
}

3.给战略合作企业部分添加hover样式

.hv:hover {
    box-shadow: 0 0 20px silver;
}

4.发觉在选中企业hover生效时会吧背景图整个突出来

思考后决定将图片剪裁到统一正方形 还是没有解决问题

5.给友情链接部分添加多媒体查询 使其在平板和手机屏幕宽度下隐藏 

@media screen and (max-width: 768px) {
    .div7 {
        display: none;
    }
}

6.修正采用无序排列标签的黑点会侵占到文字的问题 采用•（加重号）来解决

并将li便签改为p标签

7.修改折叠状态下的导航栏

先设置媒体查询使靠右在折叠状态下失效 并使文字居中

@media screen and (max-width: 765px){
    .div3 {
        float: none;
        text-align: center;
    }
}

然后再设置折叠状态下显示下边框

@media screen and (max-width: 765px){
    .aa {
        border-bottom: 1px solid rgb(231,231,231);
    }
}

   <div class="collapse navbar-collapse div3" id="example-navbar-collapse">
            <ul class="nav navbar-nav ">
                <li><a href="#" class="aa">首页</a></li>
                <li><a href="#" class="aa">职业</a></li>
                <li><a href="#" class="aa">推荐</a></li>
                <li><a href="#" >关于</a></li>
            </ul>
        </div>
</div>

设置按钮为透明状态

.background-tran {
    background-color: transparent !important;
}

<button type="button" class="navbar-toggle background-tran" data-toggle="collapse"
        data-target="#example-navbar-collapse">
    <span class="sr-only">切换导航</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

今天完成预览

8.简单搭建页面二页眉导航栏及页脚部分

明天计划的事

1.修改战略合作企业的部分 使其合乎要求

2.学习bootstrap侧边导航栏的知识

3.完成页面二侧边导航栏

4.完成合作企业简介部分

遇到的问题

1.完成的事里步骤4 战略合作企业里选择时会凸显图片形状

导致hover的样式怪异

今天的收获

1.对媒体查询宽度来控制样式的方法更加纯熟

2.学会了   

box-shadow

来给元素添加阴影