发表于: 2017-04-03 23:24:03

2 683


【今天完成的事情】

1、今天把任务12的第一个页面写完,第二个页面只写了个header。(页面1左上角返回的图标可以去到页面2)

2、读了一会sass的官方文档。

【明天计划的事情】

1、继续把页面2写完

2、继续读sass的官方文档。

【遇到的问题】

1、任务6用的bootstrap,改起来有点困难,所以这个页面html结构就重新写。

【收获】

1、用css画不同方向等腰实心三角形的方法:用span标签,顶角在哪个方向,就在那个方向相对应的方向设置"数值单位 solid 颜色",剩下两个方向就设置相同:"数值单位 solid transparent";宽高设置为0;

比如一个倒三角形:

span {
 width: 0;
 height: 0;
 border-left: .6rem solid transparent;
 border-right: .6rem solid transparent;
 border-top: .75rem solid $grey;
}

2、对sass稍微熟悉一些。

(1)关于变量。

变量的设置:是以符号”$“开头,后面紧跟变量名和变量值,而变量名和变量值之间需要使用冒号(:)隔开,就像css设置属性那样;

之前写页面的时候发现,整个页面下来会取几个颜色。所以我把这些颜色设置成变量,就不用每次设置颜色的时候都要找到我记录颜色的值,而是直接引用即可。

(2)关于嵌套。

在一个选择器中嵌套另一个选择器来实现继承,从而减少代码量,并且增加了代码的可读性。也就是说可以在父选择器的大括号里写它子选择器的样式,同时可以使用“&”符号来引用父选择器。

(3)关于mixin。

这是一很好用的功能,可以把各个选择器中公用的样式抽离出来,写到一个mixin里。然后再到具体的选择器中引用。这样可以大大减少代码量,已经让代码变得更容易维护。

具体写法是:

定义:@mixin 名称A{xxx样式}

引用到需要的选择器样式里:@include 名称A;

(4)关于运算。

刚开始做css任务的时候就在想,我能不能在css里计算值,以前搜索的时候看到的那些方法好像是用cal()什么什么的,但是当时没找到该怎么用。而预处理器可以做加减乘除四则运算,这个还挺方便的。


【3月27至4月2日周报】

<这周完成的事>

这周只做了任务11

<下周的计划>

这周必须认真写日报了,而且做任务也不能慢,不能懈怠。

<这周的问题>

一直没写日报,想测试一下,一个礼拜不写日报的话,会不会这个礼拜做任务会快一点。但是结果却事与愿违。因为没写日报,少了约束感,使得整个礼拜的学习的时间非常少。原本计划是做完任务11和12,最后只提交了任务11。

<这周的收获>

搜索安装了less和sass,学习了sass的语法,试着在任务11上用sass的变量、嵌套、和mixin来写代码。

(抱歉上周一直没写日报...)


返回列表 返回列表
评论

    分享到