今天完成的事情：

今天完成了任务13，开始任务14部分。

任务13前后做了快3天，拖了比较久，除了看了些文章外，效率确实不高，接下来还是需要注意。

除了任务本身内容外，看了一些css架构和拆分样式表的内容，任务13没有尝试，任务14开始尝试。（发现之前看文章有个不太好的习惯，没有做随手笔记或者总结，当场没有消化的部分，过几天再看就和新知识一样毫无进展，需要改正）

任务13总体和之前的任务7没有差别，页面一多了一个侧边隐藏菜单栏的效果，卡了比较久。但最终总结起来其实步骤也不难。

1、将按钮置于label标签内。

2、将label和input关联。
3、设置隐藏菜单栏的margin-left为菜单栏width值。
3、利用input的checkbox    input:checked选择器实现动效。

明天计划的事情：

明天需要开始任务14，脱离bootstrap自己完成完整网页的自适应。

遇到的问题：

侧边隐藏菜单栏的制作，最终通过百度和师兄帮助完成。

收获：

任务名称 ：css-task-13

成果链接：https://lareina-wzy.github.io/test/task13/html/task13-1.html

任务耗时：2019.11.05–2019.11.07(3天)

官网脑图：

我的脑图：

任务总结：

任务13重构了任务7的三个游戏页面。主要内容同样是布局的重构和细节调整，尝试用和以前不一样的布局方式编写。但效率不够高，下一个任务需注意。任务13页面一比之前的页面多了一个左侧隐藏菜单栏的效果。

做左侧隐藏菜单栏的时候卡了很久，百度大部分都是js实现，最后百度发现纯css可以用input实现。

思路：

1、将按钮置于label标签内
<div class="g-head">
        <label class="m-nav" for="nav">
            <div class="u-line"></div>
            <div class="u-line"></div>
            <div class="u-line"></div>
        </label>
        ……
</div>
<input type="checkbox" name="nav" id="nav">
    <div class="nav-left">
        ……
    </div>
2、将label和input关联
3、设置隐藏菜单栏的margin-left为菜单栏width值。
3、利用input的checkbox    input:checked选择器
#nav:checked~.nav-left {
    margin-left: 0;
}
#nav:checked~.g-right {
    margin-left: 200px;
}