今天完成的事情：

1.回顾上一个任务的代码，整理下自己当时写的思路，盒子用的比较多。花了点时间。

2.开始推进任务八。

3.看任务资料，并开始尝试。导航栏使用bootstrap。目前比例不太对，继续调试。

明天计划的事情：

1.继续了解下bootstrap的使用。下部分页面会用到栅格。

2.争取把页面基本布置完毕。

遇到的问题：

1.导航栏使用了bootstrap的响应式导航栏，此默认代码有媒体查询，当宽度小于768px的时候，四个导航框会变成一个按钮式的下拉菜单，具体样式还不是很清楚怎么调整。明日多研究。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 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>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">职业</a></li>
                <li><a href="#">推荐</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

2.关于引用bootstrap之后更改样式，如：

<div class="collapse navbar-collapse" id="example-navbar-collapse">

此处更改时我是直接在自己的css文件里再写了一遍collapse和navbar-collapse，不知道这样是否规范。另外更改默认样式还会涉及到优先级的问题，比如ID选择器优先级高于类选择器，感觉东西挺多的。

收获：

1.雪碧图是可以按比例调整的，比如：

background: url("img.png") no-repeat -166.8rem 0;
background-size: 358.8rem 80.9rem;

等比例缩小十倍后：

background: url("img.png") no-repeat -16.68rem 0;
background-size: 35.88rem 8.09rem;

宽高就分别是原来的十分之一。

2.关于切图。手机端需要将宽高尺寸除以2使用，此处为电脑端界面，可直接用。

今日bootstrap有点困惑。进度我也不满意。