黑马程序员技术交流社区

标题: 前端移动开发基础班的技术收获 [打印本页]

---

作者: 陈健康    时间: 2019-10-12 14:47
标题: 前端移动开发基础班的技术收获
谈到前端移动开发基础班的技术收获，那可谓是收获颇丰。首先，虽说我是在读的大四学生，在大学里所学习的是电商专业，专业课程里开设网页设计与制作的课程，那便是我第一次接触到网页代码，从此便对代码感到很大的兴趣，也下定决心学习这方面的知识，便在大三开始自学HTML和CSS。可想而知自学之路困难重重，首先没有老师讲解，同学交流，更是没有相应的工具和资源。来到黑马，这里不仅有老师。而且是非常好的老师。更有丰富齐全的资源。基础班10天的课程接近尾声，我就来谈谈有关技术方面的收获吧。
1.        HTML5 复习补充和新标签的知识
前三天的HTML5的学习里，不仅对我大学所学的知识进行系统详细的复习，更重要的是我还学习到很多以前没有接触到的标签和元素，不仅如此还学习到了很多新的知识。例如：以前只知道input标签的type值有text和password两种，但是通过新知识学习后我知道了下面这些：<input type="tel" placeholder="手机号码" >，<input type="email">，<input type="number" >，<input type="date">等等；这些只是冰山一角。
2.        CSS3的学习收获
CSS3的学习收获更是巨多。最让我印象深刻的是它使用的灵活性和丰富性，例如导航栏的滑动门做法灵活做法。当我学会CSS3做些动画时，我感到自己很厉害（哈哈），例如transform里的translate，rotate和rotate3d,scale和scale3d，skew;搭配transition效果更佳；使用CSS3做些简单的动画也是会用到这些，例如一个定义小球动画：@keyframes ball {
        0% {transform:  translate (0,0);}               
        100% {transform:  translate(400px);}
}
上面就是定义动画：小球由左向右移动到400px处。
@keyframes ball {
        0%{ left: 0; top:0; }
        25%{ left: 200px; top:0;}
        50%{ left: 200px; top:200px; }
        75%{ left: 0; top:200px; }
        100%{ left: 0; top:0; }
}
上面就是定义一个5帧的动画：小球在这一个矩形中移动：由左上角>右上角>右下角>左下角>左上角。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2