今天完成的事情：修复了折叠下拉后内容和后面的兄弟元素重叠,完成了流程图及响应式变化
明天计划的事情：继续页面余下的部分
遇到的问题： 

1.折叠下拉后内容和后面的兄弟元素重叠，原因是父元素的高被定死了，导致折叠那部分的子元素溢出来了，而不是父元素随着内容高度变化而变化，解决方案是撤销其父元素的height这个固定高，改为height:auto。

2.在制作流程图时，发现每个步骤的横线会覆盖前面的横线，原因时html的特性造成的，也就是后者居上，后来用了z-index：1，用来层叠顺序，解决了这一问题。如图：

收获：

1.了解了对流体图的制作

2.关于用HTML+CSS实现多级折叠菜单折叠树效果

其实核心的东西很简单，先贴张html结构图

可以看到按钮元素在div元素（显示内容）的上面

按钮的制作，尤其是里面的三条杠，实际是增加三个span内联元素，具体属性如图：

在媒体查询规定的宽度内里增改一下要显示内容的相应元素A，设置max-height:0，再添加overflow:hidden来实现开始的隐藏，最后再来个流畅的动画效果属性，如图：

图中的max-height为0，然后利用overflow:hidden来压缩高度

然后在按钮的地方利用伪类:focus和兄弟选择器“+”组合作触发，其触发的生效属性只有max-height，设置个超过内容高度的高度，如图：

当高度为320px时，div的hidden高度变成320px，此时由于有过渡效果，所以时缓慢下拉而不是生硬的展开。再说下max-height这个属性，它不同于width，是有伸缩性的，所以能有效适应菜单内容的高度不固定。还有就是图中的加号是选择下一个旁边的div元素，注意只选择第一个div元素。

必须要注意的是按钮元素和内容元素所在的父级不能添加height限制高度，因为这种情况会发生下拉的内容会和下面的内容重合，如图：

所以要去掉height这个属性，如果和其它属性重合了，则修改成height:auto就行了。如图：