今天完成的事情：
完成任务13 三个页面中的两个

明天计划的事情：
1、做完任务13
2、开始任务14（15）
 
遇到的问题：
1、侧边伸展的导航栏
昨天日报提到的任务13相比任务7的第一个页面要求多做一个从侧边展开的导航栏

按照昨天的思路并没有实现想要的效果，询问师兄之后指出是html结构的问题，因为focus伪类只能选择html结构在他下面的元素，例如 div1：focus + div2的时候，在html结构上div1必须要在div2的前面，这样才能用：focus+选中并实现联动效果。

如图中的html结构，一开始input这里不是用的input,而是button并使用：focus+.body_menu来将隐藏的.body1_menu给拉出来，但是此时又面临着focus这个伪类局限性的问题。那就是点击button的时候，侧边导航栏能够拉出来，但是再点button并不能使导航栏缩回去。最后使用了input checkbox属性，也是百度了半天才找到这个的正确用法，各种文章质量太差了 。
checkbox属于比较新的属性，能比较完美的实现导航栏伸缩的效果。
还有一点就是在导航栏伸展开来的时候，右边的<div class="body1_main">由于被挤压导致变形，一开始考虑到这点添加了overflow:hidden属性，但是还是无法解决被挤压 ，师兄指点说加个min-width，豁然开朗。               


2、font awesome 、组件化思想。
第一个页面侧边伸展的导航栏有四个小图标，由于没有给UI图不能切图，师兄分享了font awesome这个免费的图标库，其原理跟bootstrap库一样。引入的时候在路径上遇到点问题~
在库里面找图标的时候找不到图中所示的图标，好在官方文档说明了多种使用方法

所以我都是一个circle外加一个图标拼起，看了下源码

这个fa-stack-1x,fa-stack-2x跟bootstrap的栅格系统一样，都是预设的大小，所以在自己的css里面也可以自定义fa-stack-1x,fa-stack-2x的大小来控制图标的大小。

看了下后面任务的要求，任务14就要求拆分html各部分的css库，实现css组件化。根据官网学习资料
https://www.zhihu.com/question/20187618 的思想指导，css文件组件化好处实在是太多。


收获：
1、<input type="checkbox">的使用
2、font awesome库的初步使用
3、css组件化思想