今天完成的事

1.调整设select的伪元素样式

.w::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    right: 45px;
    height: 20px;
    width: 20px;
    background: rgb(18,119,220);
}
.w::before {
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    right: 50px;
    height: 0;
    width: 0;
    border-top: 5px solid white;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    background-color: transparent;
    z-index: 100;
}

2.完善其他三个select的样式

<div class="w margin0 position-r-ab">
    <select class="select select2">
        <option value="" style="display:none">查看详情</option>
        <option value="对口箱">对口箱</option>
        <option value="飞机盒">飞机盒</option>
        <option value="天地盖">天地盖</option>
    </select>
</div>

3.设置媒体查询条件使footer中二维码图片在屏幕宽度小于992px时缩小

@media screen and (max-width: 992px) {
    .footer-div2 {
        -webkit-background-size: 70px;
        background-size: 70px;
    }
}

4.为流程图的文字添加粗体

<storg></storg>

5.添加页脚部分

<footer class="footer-b">
    北京五一包装科技有限公司Copyright ©2015 51baozhuang.com015   All rights reserved.   京icp备99999999-1
</footer>

.footer-b {
    display: block;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: rgb(18,119,220);
    padding: 5px;
    color: white;
}

6.将页脚部分修改成栅格系统

<footer class="footer-b">
    <div class="container">
        <div class="row">
            <div class=" offset-xl-2 col-xl-3 ">
                北京五一包装科技有限公司Copyright
            </div>
            <div class="col-xl-2">
                ©2015 51baozhuang.com015
            </div>
            <div class="col-xl-2">
                All rights reserved.
            </div>
            <div class="col-xl-2">
                京icp备99999999-1
            </div>
        </div>
    </div>
</footer>

7.给“关于我们”部分添加媒体查询 在屏幕宽度小于768的情况下添加上下外边距

@media screen and (max-width: 768px) {
    .footer-a {
        margin: 10px 0 !important;
    }
}

8.修改登录及注册的文字颜色

.header-p1 {
    color: white !important;
    padding: 20px 0;
    font-size: 14px;
}

.hover1-header:hover {
    background-color: white;
    color: rgb(0,0,0) !important;
    cursor: pointer;
}

9.学习less

明天的计划

1.学习less

2.下载任务11的素材

3.开始任务11

4.修改任务10中不对的地方

遇到的问题

1.不知道如何使用父元素hover样式控制子元素的伪元素样式

就是流程图部分 鼠标移动到文字时 上面的节点线条也会跟着变色(伪元素）

2.找不到比较规范的less学习教程

3.使用less必须要安装node.js？

4.网络引用less.js文件是否需要放在HTML文件最下面

今天的收获

1.熟练使用媒体查询来修改在不同屏幕宽度下的样式