今天完成的事：

今天刚接触任务8，把响应式折叠导航栏：由一个button按钮添加bootstrap的navbar-toggle--设置button元素为导航条组件的切换钮； data-toggle=“collapsed”——指button元素为在视口小于768px时事件触发和data-target=#menu”data-target事件的目标三个span标签组成的按钮形成的导航栏：

<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

以及导航栏的选中效果解决了。

本以为任务8的三个任务是在一个网页写的，百度了很久也浪费了很多时间也没找到该怎么写，最后才发现现在比较流行的都是使用同一个顶部方案写多个页面，其中因为导航栏的对其方式了解到nav和navbar的一些用法和区别（详情：https://blog.csdn.net/zxkadeline/article/details/81001553），在翻坑乎时学习到如何应对不同屏幕宽度下的页面不统一的处理方法（通过@media查询设置想要的屏幕宽度例:（max-width：800，屏幕宽度最大值为800以内的网页生效）定义不同屏幕宽度的的布局来改变屏幕缩放导致的布局崩溃，这个好像在前面的任务点里有涉及到，粗心大意疏忽了），谢谢深圳分院的何潇师兄日志帮我复习了。

明天需要完成的事：

继续了解bootstrap的剩下的一些属性，任务八的第一个页面完成。

遇到的问题：

还是搞不明白为什么ul的宽度设置成100%时，导航栏不管设置pull-right还是用css去定义float：right；导航栏始终处于左对齐的状态

<ul class="nav nav-tabs pull-right" role="tablist">
    <li class="active">
        <a class="nav-link" data-toggle="tab" href="#home"><div class="one">首页</div></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1"><div class="one">职业</div></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu2"><div class="one">推荐</div></a>
    </li>
</ul>