发表于: 2018-07-02 17:00:58

1 584


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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中重复写类名的操作。

比如

/* 导航栏样式 */

main .box1 {
background: #f9f9f9;
}

/* 去除导航栏默认样式 */

.box1 .navbar {
padding: 0;
}

/* 导航栏按钮样式 */

.box1 ul li {
margin-top: .128rem;
margin-bottom: .128rem;
margin-left: 4vw;
border-radius: 5%;
font-size: .14rem;
box-shadow: .5px .5px #888888;
background: white;
}

.box1 li:hover {
background: #1d7ad9;
}

.box1 li:hover a {
color: white !important;
}

通过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


返回列表 返回列表
评论

    分享到