昨天在B站看了技术胖的一个视频 硅谷大佬都在用的程序十步学习法(上),他讲到一个程序员十步学习法:
- 1.了解全局;
2.确定范围;
3.定义目标;
4.寻找资源;
5.创建学习计划;
6.筛选资源;
7.开始学习 浅尝辄止;
8.动手操作 边学边玩;
9.全面掌握 学以致用;
10.乐为人师 融会贯通;
虽然之前不知道这个十步学习法,但是这和我们过去采用的学习方法或多或少的重叠,特别是关键的定义目标和创建学习计划,漫无目的的学习注定达不到满意的效果,首先得明确一个长远的目标,一般是困难但通过努力有希望达到,因为难,需要把大目标分解为短期的小目标,短期目标应该是那种跳一跳够得着,然后指定合理可行的学习计划,学习计划最好在了解全局的情况下,具体到每一天做什么,怎么做,并有明确的考核标准。
上周知识点复盘
介绍几个强大好玩的CSS属性
-
transform
属性用来设置元素的变形效果
变形就是指通过CSS来改变元素的形状或位置,变形不会影响到页面的布局,不会脱离文档流。
在CSS3中transform主要包括以下几种:
translate-平移
translate(<x> [<y>]) 变换函数通过 x 向量和 y 向量移动元素 (i.e. xnew = xold + <x>, ynew = yold + <y>). 如果 y 向量没有被提供,那么默认为 0
scale -缩放
scale(<x> [<y>]) 变换函数通过 x 和 y指定一个 等比例放大缩小 操作。如果 y 没有被提供,那么假定为等同于 x
rotate-旋转
rotate(<a> [<x> <y>]) 变换方法通过一个给定角度对一个指定的点进行旋转变换。如果x和y没有提供,那么默认为当前元素坐标系原点。否则,就以(x,y)为原点进行旋转。
skewX-延X轴斜变
skewX(<a>) 变换函数指定了沿 x 轴倾斜 a° 的倾斜变换。
skewY-延Y轴斜变
skewY(<a>) 变换函数指定了沿 y 轴倾斜 a° 的倾斜变换。
矩阵变形matrix -
filter
(滤镜)将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
这样式太强大了,曾经在面试中被问到,如果将页面的所有元素蒙上一层灰色,当时较劲脑汁想了各种办法都被面试关点破,最后他说其实只要一个叫filter属性设置,非常简单,现在知道原来就是 filter: grayscale(100%); 放在body上,整个页面一下变灰了,不要太神奇。 -
calc
在css中,calc() 是一个计算器,我们可以在里面运行我们的计算表达式。
width:calc(100% - 4px) //宽度减少4px
height:calc(100% - 4px) //高度减少4px
结合渐变的背景色就作出了下面第二个登陆页面的绚丽边框
由于上周前三天开始学习晚了,因为太困都没完成任务,最后只完成了4天的任务,按照之前的约定需要在班级群发一百的红包。
第二周作业
实现这些小程序,基本都是先看一到三遍操作视频,明确大概步骤,实现思路,然后开始跟着做,对于新的属性重点学习,目前还达不到完全自己写出来,就继续练习吧。
网友评论