今天完成的事情：

一、学习使用boostrap制作导航栏

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

<div class="collapse navbar-collapse">

宽度大于等于768时，display=block；宽度小于768px时，display=none；

参考资料：https://www.cnblogs.com/jipinglong/p/9032640.html

一度很迷茫，无从下手的感觉，一点一点对照bootstrap做

<nav class="top2">
    <img class="" src="../images/t8/intro_04.png">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
        <img src="../images/t8/menu.png">
    </button>
    <div class="collapse navbar-collapse" id="navbar">
    <ul class="">
        <li class="li-active">
            <a href="main.html">首页</a>
        </li>
        <li>
            <a href="job.html">职业</a>
        </li>
        <li>
            <a href="intro.html">推荐</a>
        </li>
        <li>
            <a href="">关于</a>
        </li>
    </ul>
    </div>
</nav>

data-toggle是指以什么事件触发，data-target是指定的元素

遇到的问题：

导航栏展开方式问题

flex格式的锅

改用position定位来做，但是无论怎么改都改不出效果来。。。

最后只能在元素外添加一个隐藏元素，用data-target来定位

搞定！

明天计划：

学习任务10

今天完成的事情：

完成了任务8,9

学会了使用data-target和data-toggle来触发功能