前端练习-第二周

昨天在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天的任务，按照之前的约定需要在班级群发一百的红包。

第二周作业

实现这些小程序，基本都是先看一到三遍操作视频，明确大概步骤，实现思路，然后开始跟着做，对于新的属性重点学习，目前还达不到完全自己写出来，就继续练习吧。

本周学习计划

前端练习小程序-第三周（7月20日-7月26日）