今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

任务10任务总结

我的脑图：

官方脑图：

任务10依然是对于布局的理解和熟悉，以及加深bootstrap的应用。

首先根据ps图。

确定自己的布局结构

首先分为header和footer。然后是导航栏。

流程图和后面的表单可以放在一个bootstrap的container中进行书写。

而后按照ps图进行制作。对不同的模块，思考使用不同的响应式布局。根据屏幕变化的大小使用相应的@media。媒体布局。

之后学习了使用css模拟form表单。

通过使用label标签的关联模拟功能。隐藏原生input，通过input的id，关联对应label标签，然后对label标签进行样式定义。

设计自定义样式的checkbox。

接下来开始任务11，学习sass

- -首先是安装和环境配置。。。没什么难度官网下下来然后一直下一步就好了。

按照官方文档的安装教程走。

SASS允许使用变量，所有变量以$开头。

　　$blue : #1875e7;　

　　div {

　　　color : $blue;

　　}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

　　$side : left;

　　.rounded {

　　　　border-#{$side}-radius: 5px;

　　}

还可以在代码中使用计算式：

　　body {

　　　　margin: (14px/2);

　　　　top: 50px + 100px;

　　　　right: $var * 10%;

　　}

还可以使用选择器嵌套。

　　div h1 {

　　　　color : red;

　　}

也可以拆写成：

　　div {

　　　　hi {

　　　　　　color:red;

　　　　}

　　}

属性也可以嵌套，

　p {

　　　　border: {

　　　　　　color: red;

　　　　}

　　}

嵌套属性的规则是这样的：

把属性名从中划线-的地方断开，在属性后边添加一个冒号: 紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来

nav {

  border: {

  style: solid;

  width: 1px;

  color: #ccc;

  }

}

在嵌套的代码块内，可以使用&引用父元素。比如:hover伪类，可以写成：

　　a {

　　　　&:hover { color: #ffb3ff; }

　　}

sass的变量也就是使用$符合声明变量名。

在需要的时候只要在css语句后直接使用。

如果在字符串中需要使用变量名则，需要使用#{}将变量名括起来。不可以在字符串中直接使用sass变量。

- -计算式的话。。除了可以使用变量的计算式感觉方便点。。。其他的计算都可以通过直接赋值解决吧....不知道可不可以将之前计算的值赋予给新的变量。

通过使用嵌套可以免除之前在css中重复写类名的操作。

比如

通过sass就可以写成。

.box1 {

    .navbar {

    padding: 0;

    }

    ul {

       li{    

          margin-top: .128rem;

          margin-bottom: .128rem;

          margin-left: 4vw;

          border-radius: 5%;

          font-size: .14rem;

          box-shadow: .5px .5px #888888;

          background: white;

          &：hover {

                    background: #1d7ad9;

                   a {

                   color: white !important;//这里不太清楚这样写对不对。但是根据我看的理解应该这么写

                   }

               }

        }

      }

}

注释：

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释

继承、

可以使用@extend命令继承另一个类的属性值：

　.class1 {

　　　　border: 1px solid #ddd;

　　}

　　.class2 {

　　　　@extend .class1;

　　　　font-size:120%;

　　}

继承不仅会继承@extend .class1自身的所有样式，任何跟.class1有关的组合选择器样式也会被.class2 以组合选择器的形式继承

然后看了mixin。

mixin给我的感觉就是事先写好一个模块。

然后通过@include调用就可以了。

@mixin left($value: 10px) {

　　　　float: left;

　　　　margin-right: $value;

　　}

比如这样一个mixin。

如果通过@include left调用打的时候没有声明value的值。

则即是 

div {

  @include left

}

则为：

div {   

    float: left;

　  margin-right: 10px;

}

如果@include left（20px）则是指定了value的值。

明天计划的事情：（一定要写非常细致的内容） 

学习sass。
遇到的问题：（遇到什么困难，怎么解决的） 

收获：（通过今天的学习，学到了什么知识）

了解了sass