今天完成的事：

一、使用sass完成任务11

学会了一个新属性

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance:none;
}

对应的是时，选框右侧出现的小箭头

二、sass的一些应用规则

1、在嵌套的代码块内，可以使用&引用父元素。

Sass：

header span a{
  color: $text-color;
  &:hover {
    text-decoration: none;
  }
}

Css：

header span a {
  color: white; }
  header span a:hover {
    text-decoration: none; }

2、注释

Sass：

/* sdasds */
// asdasdasd

Css：

/* sdasds */

// comment 是Sass单行标注，不会被翻译到css

/* comment */是标准注释，可以被翻译到css

3、继承

Sass：

footer {
  padding: $padding;
  text-align: right;
}

footer a {
  color: $bg-color;
}

body div {
  @extend footer;
}

Css：

footer, body div {
  padding: 0 5%;
  text-align: right; }

footer a, body div a {
  color: #5fc0cd; }

使用@extend后，所有的footer标签都被添加了一个body div

包括footer a ，也变成了 body div a 。所以这个继承还是少用的好。。

4、@mixin的使用

@mixin有点类似于自定义的框架

Sass：

@mixin col {
  color: #cccccc;
  background-color: #2b542c;
}

.zzz {
  @include col
}

Css:

.zzz {
  color: #cccccc;
  background-color: #2b542c; }

而好处是@mixin可以自己设定参数变量

例如：

Sass:

$color: red;
@mixin div($color) {
  background-color: #2b542c;
  color: $color;
}

.zzz {
  @include div(white);
}

Css:

.zzz {
  background-color: #2b542c;
  color: white; }

@inclde 可以调整变量，覆盖样式

5、@import

@import可以插入文件

外部css：

Sass：

@import "../test.css";

Css：

@import url(../test.css);

@import的文件内容将被插入，相当于复制进来的额外样式

三、修改任务9卡片的hover动画效果

父元素设置position：relative

hover的选框设置position：absolute

从右侧进入，则设置right：-xx 或 left：xx

需要设置width：100%，否则元素会坍塌

动画代码：

.intro-sm:hover .hov {
    visibility: visible;
    transform: translate(-700px,0);
    transition: transform 0.5s;
    z-index: 1;
}

transform：translate（x，y）代表移动轴，轴心是屏幕的左上角，数值>0则顺着轴移动，数值<0则向轴心移动

遇到的问题：

暂无

明天计划：

把任务9/10/11改完，然后制作任务12

收获：

对于版本库有了一定的理解，每一次服务器数据被更新，版本库也会随着更新，版本号的不同，pull下来的文件会与本地文件冲突，这样就可以知道有人修改了数据，所以每次push前要先pull一下，防止数据覆盖。

还差一点改完任务9，明天继续