今日完成：

今日继续拆组件。完成字体样式文件、布局样式文件，header模块的拆分。没有完成昨日计划的footer组件拆分，原因一是今日没有全天学习，二是思路不清晰，实现折叠式的下拉菜单中途换了几种方式去实现，耽误了时间。

明日计划：

继续拆组件，争取完成所有模块的拆分。

遇到的问题：

1.less的编译器（考拉）出了问题，导致配置的less代码（包括媒体查询，相关的属性设置）不起作用，我还以为是我代码敲错了。结果查了半天，失效的属性突然自己回来了。只能解释为编译器或者浏览器出了问题。

这个问题的解决方式只能是自己多个心眼，遇到问题从多角度去找原因，不一定就是代码有问题。

2.今日主要问题就是在拆分折叠式的下拉菜单上。首先是实现方式，开始尝试了用css的hover、active事件，但是后来觉得hover事件是鼠标移动上去就显示，而我想要实现点击后再显示菜单，但是active事件在鼠标松开后就失效了。于是尝试了mousedown事件，但是mousedown与mouseover事件也有同样的问题，就是取消这个鼠标事件时也不能依靠点击页面其它地方来实现（而是鼠标离开这个区域事件就失效）。

最后还是切换回来，用hover事件来实现。但是布局又出现问题，想要实现下拉菜单100%显示，又不破坏标题栏的布局，还是调试了很久才成功。

3.第三个问题就是时间安排问题，计划性不强。在第二个问题上耗费太多时间，导致我没有完成整体的计划，以后要注意。

收获：

1.通过拆分样式文件（字体样式、布局样式）与模块，对css模块化有了更深认识。

2.对鼠标事件有了更深了解。

hover：鼠标移动到该元素区域，显示预设的效果。鼠标离开该区域后效果消失；

active：鼠标在元素区域内点击，显示预设效果，松开鼠标后消失；

‍‍鼠标响应事件：

‍‍onMouseDown：按下鼠标时触发预设事件 
onMouseOver 鼠标经过时触发预设事件‍‍
‍‍onMouseUp 按下鼠标松开鼠标时触发预设事件 
onMouseOut 鼠标移出时触发预设事件 
onMouseMove 鼠标移动时发预设事件

‍‍鼠标响应事件的格式为：nMouseOut="this.className='预设事件或样式名'。‍‍‍‍‍‍