今天完成的事

1.调整header、nav、footer的不同分辨率下的布局模式

<header class="background-blue">
    <div class="container">
        <div class="row">
            <p class="header-p1 col-lg-3 col-md-3 col-sm-3 col-xs-8">客服热线：010-594-78634</p>
            <a class="header-p1 text-center hover1-header
                      col- col-lg-1
                      col-md-offset-7 col-md-1
                      col-offset-sm-7 col-sm-1
                      col-xs-2
                      ">登录</a>
            <a class="header-p1 text-center hover1-header
                      col-lg-1 col-md-1 col-sm-1 col-xs-2">注册</a>
        </div>
    </div>
</header

<footer class="background-silver footer">
    <div class="container">
        <div class="row">
            <p class="col-lg-4 col-md-4 col-sm-111 col-xs-12">51包装网— 纸箱包装首选服务平台</p>
            <div class="row  col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <a class="footer-a col-lg-4 col-sm-4 col-md-4 col-xs-4">关于我们</a>
                <a class="footer-a col-lg-4 col-sm-4 col-md-4 col-xs-4">配送流程</a>
                <a class="footer-a col-lg-4 col-sm-4 col-md-4 col-xs-4">联系我们</a>
                <a class="footer-a col-lg-4 col-sm-4 col-md-4 col-xs-4">下单指南</a>
                <a class="footer-a col-lg-4 col-sm-4 col-md-4 col-xs-4">媒体介绍</a>
            </div>
            <div class="row
                        col-lg-offset-1 col-lg-3
                        col-md-offset-1 col-md-3
                        col-sm-10 col-off
                        col-xs-offset-1 col-xs-10 footer-div2">
                <p class="">TEL：400-0000-000</p>
                <p class="">企业QQ：123456789</p>
                <p class="">微信号：XXXXXXX</p>
            </div>
        </div>
    </div>
</footer>

<nav class="background-silver">
    <div class="container">
        <div class="row right">
            <a class="nav-a">首页</a>
            <a class="nav-a">在线定制</a>
            <a class="nav-a">标准箱</a>
            <a class="nav-a">品质保障</a>
        </div>
    </div>
</nav>

2.使用中发现有很多本地移植栅格系统的细节问题没有弄好 放弃使用复制的栅格系统

改为网络引用bootstrap的css文件

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

3.学习bootstrap3和bootstrap4中栅格系统的区别

4.初步使用bootstrap的栅格系统来架构footer布局

<header class="background-blue">
    <div class="container">
        <div class="row">
            <p class="header-p1 col-xl-3 col-lg-3 col-md-3 col-sm-3 col-6">客服热线：010-594-78634</p>
            <a class="header-p1 text-center hover1-header
                      offset-xl-7 col-xl-1
                      offset-lg-7 col-lg-1
                      offset-md-7 col-md-1
                      offset-sm-5 col-sm-2
                      col-3
                      ">登录</a>
            <a class="header-p1 text-center hover1-header
                      col-xl-1 col-lg-1 col-md-1 col-sm-2 col-3">注册</a>
        </div>
    </div>
</header>

明天计划的事

1.学习bootstrap4的内容

2.根据bootstrap4重新编辑网页架构布局

3.架构进度条部分

遇到的问题

1.编辑时返现使用移动设备的宽度浏览网页会自动缩小 

后面检检查才发现没有设置移动设备宽度适应

name="viewport"
content="width=device-width  initial-scale=1  minimum-scale=1"

2.网络引用bootstrap后col-offset- 不起作用

搜索后发现