今天完成的事情：开始任务12的学习，上午开始任务12中任务5网页的代码编写，重新编写了任务5的html网页部分，并通过less编写编译css部分，下午继续上午任务5部分的编写，到下午4点半左右完成，后来根据不同分辨率下显示的效果，对细节部分做了微调。晚上编写完了任务6的html网页部分，话没有开始less编写编译css部分。

明天计划的事情：继续编写任务6的代码，并调试。下午制作小课堂，晚上优化任务6部分的代码。

遇到的问题：

 第一个问题和昨天编写任务11时header部分的问题有点相似。相似也有区别，今天主要是左侧那个返回icon的垂直居中问题，使用昨天的方法，虽然是图标下移了些许，但很明显没有和中间span的文字在一条线上。对两个div和span设置了inlin-block后并没有起作用。后来试了半天，最终是用定位的方法完成图标的垂直居中的，但是代码显着很多，目前还没有更好节省代码的方法。没有使用fixed布局。

 第二个问题是头像的垂直居中问题，以前写的比较烦琐，是div下有套div后通过定位才完成的。这次就没有再套盒子，使用父元素为display：table，img为table-cell，完成的，相对简单些，但后来导致了两个问题：1：在小分辨率下，头像部分的div会向中间偏移；2：右侧的文字设置为inlin-block上不去，浮动后也上不去。最后还是按定位的方法完成的，只是没有过多地套用盒子。

 第三个问题：技能部分最后一行的内容和标题部分，以前用dl列表标签做的，这次完全就是用div做，相对而言嵌套的层次没有以前那么复杂了。但是最后一行的内容部分，开始是用p标签套span标签编写的。开始设置span为inlin-block，没有上去，同行显示，后来设置了右浮动，和一定百分比的宽度，文字上去了，但文字总是和左侧文字有动态的距离。最后对p和span都设置了左浮动，父元素用伪类完成消除浮动的影响。当然span部分的宽度还是用百分比设置的，也是一点点在不同分辨率下调试的最终结果。

收获：建立了一点公用的库，用于引入less方便编写，比如左右浮动，圆角边框，定位的属性，定位垂直居中，父元素伪类清楚浮动。感觉可以缩写代码建库，只要自己记住就行，引用到less方便编译，最终呈现的css结果也是大家公认规范的，并不因为缩写代码库影响。相对个性化一点!