今日完成：

今日重新用less重写了任务五与任务六（任务十二）。

明日计划：

开始学习任务十三

遇到的问题：

1.今天遇到的最大问题，是出现在重写任务六的下拉菜单。

由于不能用bootstrap，尝试了好几种办法，都不能用纯css实现下拉菜单。最后，从网上抄了一段js的代码来实现。但是js的代码和自己的css代码出各种问题，调试和修改了2个小时。。 

我的基本思路是首先ul id=nav；然后将三个li进行向左浮动，作为三个下拉菜单的标题栏；然后在这三个标题栏下分别再设置一组ul和三个li，作为下拉的菜单；最后借用js的代码实现鼠标事件（鼠标划过--出现，鼠标离开--隐藏）。

第一个大问题是下拉出来的菜单，鼠标只能划过一半菜单就消失了，菜单栏最下面的一栏鼠标永远无法点击到。查了n久，原因是我把菜单栏放在了footer，（footer总高度为5rem，body设置了pading-top：5rem），而菜单栏最下面的一栏，高度已经超出了footer的5rem高度范围，所以鼠标划过去时，菜单就消失了。不明白这个问题的根本原因在哪里，最后将菜单栏移出footer，放入main后问题解决。

第二个问题（如图：）下拉菜单的ul不能设置magin-top，否则鼠标不能滑动到菜单栏（会中途消失）；如果设置pading，就不能为ul设置外边框，视觉效果不好。

最后还是用了很麻烦的方法，为下拉菜单第一个li设置上边框，最后一个li设置下边框，然后所有的li都设置左右边框解决。

归根结底还是不了解JS，不能实现鼠标点击后，菜单再消失这个功能。

2.其他主要是重写任务时，一些基础知识的问题。

A.用less定义了一个class绝对定位left：5rem；下一个class嵌套了这个class，但是需要重写绝对定位为right：5rem。一直调试不成功，因为浏览器会先读取left，再读取right。最后发现解决方法很简单，设置left：auto就解决了。出现这个问题的原因是不了解绝对定位可以设置auto这个值。

B.调试页面的行时发现行之间有空隙，结果是因为使用了display：inline-block。所以会有空隙。

收获：

1.通过重写下拉菜单样式，对ul li等功能更加熟悉；

2.熟悉了less的混合嵌套、赋值等功能；

3.对于实现居中更加熟悉，感觉flex和绝对定位+transform用起来效率最高。

PS：

任务提交页面只能放一个衔接，就在这里把任务十二的第二个页面放上来。