今天完成的事情

1. 完善了任务8的内容并提交任务（虽然已经被打回来了）
2. 学习了less。

明天计划的事情

继续修改任务8中的内容，修改完成后着手任务10，开始尝试使用less编写样式，然后编译为CSS文件。

遇到的问题

任务8的导航栏白边、导航标签的hover动作会导致导航栏的宽度改变。 解决： 对bootstrap的导航栏的部分属性进行重写。 直接给标签加上border border-bottom:4px solid transparent 这样a标签中始终存在又4px的border，不会因为hover的动作导致border的出现和消失导致宽度产生变化。

收获

学习了less的使用

什么是Less?

作为CSS的扩展，Less不仅仅向后兼容CSS，并且添加了额外的属性加入到现有的CSS语法中。

如何使用Less

首先，你必须要确保安装了node.js 再打开命令行 使用下列命令来安装less

npm install -g less

新建一个.less文件，编写完成后，使用下列命令将less文件编译成CSS

lessc style.less style.css

语法规则：

变量（Variables）

下面是一个很好的例子:

编译为：

#header {  color: #6c94be;
}

混合(Mixins)

它被用于将一组属性从一个规则集运用到另一个规则集内 例：

编译为：

嵌套(Nesting)：

Less能够允许你使用嵌套而不是级联的组合，看下面的CSS:

如果我们想要对#header内的盒子分别写不同的属性，那么我们在CSS中必须按照级联的方式编写。 在Less中，我们也可以这样编写：

这样编写显得更加的简洁明了，与HTML结构类似。 Less也允许嵌套伪类

诸如@media或@support之类的@规则可以以与选择器相同的方式嵌套。@规则被放置在顶部，相对于同一规则集内的其他元素的相对顺序保持不变。这叫做冒泡。

编译为：

运算(Operations):

算术运算+，-，/可以在任何数字、颜色或变量上操作。如果有可能的话，数学运算会把单位考虑进去，然后在添加、减去或比较它们之前转换数字。结果是最明确的单元类型。如果转换是不可能的，或者没有意义，单位就会被忽略。不可能转换的例子：px到cm或rad到%。

注意：

乘法和除法不能转换数字。在大多数情况下，它是没有意义的——长度乘以长度给出一个区域，而css不支持指定区域。更少的将在数字上操作，并将显式的单位类型分配给结果。

转义(Escaping) 

转义允许您使用任意字符串作为属性或可变值。任何“任何东西”或“任何东西”都被使用，除了插值之外没有任何改变。 这与C语言内的宏及其类似。 例：

相当于@min768代替了"(min-width:768px)" 编译后：