发表于: 2018-07-21 22:38:45
1 684
今天完成的事情:
1.写完任务13大部分;
2.学习混合宏的用法;
3.复习前面的内容;
明天计划:
1.完成任务13;
2.研究checkbox的用法;
遇到的问题:
写版本选择页面时,侧边栏的点击触发出了点问题;听师兄
说可以用checkbox实现,明天研究一下
收获总结:
1.sass中插值 #{}的收获总结:
在Sass中,除了在设置属性的值的时候,我们可以使用变量或循环等方式赋值以外。属性的名称,
选择器名称等,都可以使用一种叫插值的方式将字符串插入进来。如果属性值是一个简单数字或者
字符串,我们可以使用变量的方式来实现。但如果属性值是一个复杂的数据类型,我们就必须使用
插值的方式来实现。如果你想要在Sass中构造一个新的选择器名、新的属性名以及新的属性值,应
该考虑使用“插值#{}”来实现。
插值不可用的情况:
1.插值不能用在属性的值中,也就是不能出现在冒号后边,否则会报错,无法识别。
2.不能用来调用混合宏,如@include updated-#{$flag} ,这里的插值同样不会被识别。
(但经过试验,@extend后边使用插值是可以的)。
2.重新用sass写完了三个页面的大部分内容,对sass的混合宏与插值的用法有了比较深刻的认识;
我大体的结构是在写样式时先用混合宏配合插值对几个经常用的属性,比如flex,定位,字体,margin,
padding,等先写好一个大概的框架,等到要用的时候就方便引用了;
比如定位,我会先用混合宏配合插值先写出以下框架模板:
@mixin position($position,$side1,$s1value,$side2,$s2value) {
position: $position;
#{$side1}: $s1value;
#{$side2}: $s2value;
}
//这里面加粗的就是可以随时改变的变量,像定位的类型position:fixed,relative.....
#插值配合变量$side1,$s1value可以对定位的方向,top,left,,进行赋值;
写好了一个个模板之后套用起来就很方便了;可以直接使用@include引用相应的样式
名,并对具体的变量进行赋值;
3.学习js事件:
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
主要事件表:
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
评论