今天完成的事情：

  1.完成任务10

  2.学习less

明天计划的事情：

  开始任务11

遇到的问题：   

1.任务10中修改radio样式，最好的教程是官网的教程，完全是使用CSS完成的，第一步用属性选择器隐藏input样式，第二步增加一个span覆盖到input的位置,第三步设置input：checked时，span样式。网上其他的教程很多都有JS的操作。

2.学习less

 第一步 编译less文件

 第二步 用考拉转成css文件

 第三步 link链接新生成的css文件

a.变量  ： 当一个值需要反复使用时，可以通过@符号定义变量。

b.混合 ：混合就是把一个样式的选择器作为值写在另一个样式里。 less还支持带参数的混合以及有默认参数值的混合。

       1.带参数的混合：类名A（变量）{属性：变量； }       混合时         类名 { 类名A（自己设定数值）；}

       2.带默认参数的混合：类名B（变量：默认数值）{属性：变量；}

       3.@arguments 一次性传输参数

           以border为列，   .border(@w:3px,@c:red, @x:solid)

                                                     { border:@arguments; }

                             混合时：box {   .border(5px,blue);}  将w线宽由3px改为了5px. 颜色改为蓝色。

c.嵌套： 

           ul

               li  >a

               li  >a

           less 样式设置的时候，ul {     li{   a{ &:hover}   }   }

                                                               &表示上一级元素此处就指a

d.匹配模式：

相似的重复样式时候使用，下面表示.box直接引用了绝对定位，并且@_设置了所有定位中通用的样式。

.box {

  width: 10rem;

  height: 10rem;

  .border(1rem,blue);

  .pos(a);

}

.pos(a) {

   position: absolute;

}

.pos(f){

  position: fixed;

}

.pos(r) {

  position: relative;

}

.pos(@_){

  width: 20rem;

  height: 30rem;

}/*  @_ 设置了所有.pos中的通用样式 */

e.避免编译 ： 不需要less中的某些内容被自动编译 ， 格式    ~“ 避免编译的内容 ”

收获：  学习了less，明天开始在任务11中应用。