发表于: 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来写代码。
(抱歉上周一直没写日报...)
评论