今天完成的事：

一、修改任务9导航栏

关键点在于嵌套，轻松搞定

<nav class="top2">
    <div class="space-between">
        <img class="skilltree" src="../images/t8/intro_04.png">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#mynavbar">
            <img src="../images/t8/menu.png">
        </button>
    </div>
    <div class="collapse navbar-collapse" id="mynavbar">
            <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>

.top2 {
    padding: 1% 10%;
    width: 100%;
    background-color: #29b078;
}

.space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

二、学习了使用<a>制作锚点

<a href="#a">前端开发</a>
<a href="#b">后端开发</a>
<a href="#c">移动开发</a>
<a href="#d">整站开发</a>

<div class="job-dir" id="a">
    前端开发方向
</div>

给要跳转的位置添加id，给跳转按钮添加href=#id，即可实现

三、任务10完成

四、学习任务11

less用法：

<link rel="stylesheet/less" type="text/css" href="../styles.less" />
<script src="../less.min.js" type="text/javascript"></script>

需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

参考资料：http://www.bootcss.com/p/lesscss/

遇到的问题：

导航栏弹出卡顿问题依然没解决

复制https://www.runoob.com/try/try.php?filename=bootstrap3-navbar-responsive案例过去，案例也会卡顿，不知道哪里出了问题，暂时跳过

明天计划：

学习sass或者less，做任务11

收获：

真正完成了导航栏的折叠和弹出

看了看less和sass文档，感觉两者相差不是很大

资料显示sass功能更强，还在纠结中

任务9：https://jihpeng.github.io/Task/t8/main.html

任务10：https://jihpeng.github.io/Task/t10/t10.html