今天完成的事情：

任务13剖析：

定制架构思路：参照昨天看的文章

先分析一下任务13的页面需求，比如颜色，边框，字体，背景颜色，display：flex等等这些共通的建立一个通用库，

然后建立一个总的雪碧图的css库，再根据按钮，导航栏，一些手动画出来的图形等各种模块建立一个模块库等待分别调用。

根据每个页面需求的样式不同进行不同的css reset，这样就算差不多清晰了。

难点：如何实现css+html的侧边导航栏

搜索一番，思路是通过lable和chickbox绑定，然后设定aside

其中有2个没用过的样式：

<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关

transition:  0.2s  ease-out;(此为动画效果，ease-out为渐变效果，在此前加入0.2s为渐变时间。）

首先，设定单选框隐藏display：none；

设定aside（侧边栏）为position：absolute（脱离文档流）；设定宽度，left：为负宽度（实现隐藏）

top：0和bottom：0；（上下拉满高度）设定ease-out（渐变），侧边导航栏的内部内容可以用ul无序列表，a标签包裹li，在进行详细设定样式。

单选框选中绑定aside，input：checked+aside{left：0}（显示出来，配合ease-out达到动画效果）

到这里隐藏部分完成，接下来就是设定一个三条横杠的图标，绑定lable来进行控制单选框，隐藏菜单和呼出菜单。

因为太较真想实现侧边栏的整体推动效果，导致页面到了10点才写了第一页。

好在任务框架，通用库，需要写出来的图形，模块基本完成，接下来就是拼装。

明天计划的事情：

任务13做完向任务14进发。

遇到的问题和收获：

第一次以架构形式来拆分任务，把所有的模块都拆进了模块css文件里，问了师兄才知道，页面独特专有的样式没必要放进模块库中，写在页面css文件里就行，重用性高的模块放进模块库里。

样式拆分的比较细，html上写的比较臃肿，后面把居中的属性给整合一下，尽量减少类名。类名过多导致html臃肿，也会影响性能，这需要一个度，还在摸索。

在写侧边导航栏的时候，lable的for绑定的id我以为绑定的name，导致lable失效。

还有一个就是得把checked绑定lable图标，不然会如下图覆盖住，导致点都没法点回去。。只能刷新

以为没给图标就没把图标写进去了

看了下psd，原来隐藏起来了。。。

写了半天雪碧图我以为图片坏了查了半天原因，还换了软件制作雪碧图。。结果是因为雪碧图也是白色

这波心态爆炸。换了下背景颜色，完事。。

被侧边框如何推动整个页面困扰了2个多小时，虽然有点思路：把input放在body下面，使用checked关联body点击时产生50%的margin-left来实现这个推动，但显然是不行的，在查看其他师兄坑乎的问题代码后，尝试了一下其他师兄的思路，虽然挤开其余部分但是又产生一个问题，被挤开的部分缩放到了50%，经过师兄指导后，总结了实现方法：

直接在body下写input，在input后面写一个类，最小宽度为100%（使菜单出现时不会缩小），把页面内容都包进去，

更改aside的显示隐藏方法（之前使用的脱离文档流定位left：负的宽度进行隐藏，正是因为脱离了文档流才无法挤开整个页面）

新的隐藏方法：更改aside宽度为0（宽度为0需要设定overflow：hidden，不然内部元素会显示出来，需要设置flex-shrink为0，不然因为前面设定的包裹页面内容的类的最小宽度为100%导致无法弹出。），

绑定checked点击时宽度为50%（或其他宽度），这样就可以实现把整个页面推过去的效果

body需要添加overflow：hidden，和display：flex使他们并排，而inline-block无法达到这个效果，

这个方式其实就是把侧边菜单和整个页面内荣并排，相当于两个等大的盒子并排。默认情况下会有缩放，所以需要使他们不缩放。

检查的时候发现一个新的问题，其实页面出现了滚动条这个问题对于现在的我来说超纲了，搜索了许多也没能够解决这个问题，只能暂时搁置。