2016-07-01 至 2016-07-31 前端工作知识点总结

前端之家收集整理的这篇文章主要介绍了2016-07-01 至 2016-07-31 前端工作知识点总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

//2016-07-01 至 2016-07-31 前端工作知识点总结

目标:

1、angularJs博文
2、nodeJS博文
3、首页大图变型处理
4、《Node 与 Express开发》
@H_403_6@

知识点:
1、sass 定义数组,循环遍历

$backgoundColor:#2BCCB1,#01A9F4,#F8A12F,#4BAF51;
@for $i from 1 through 4{
                                        .section#{$i}{
                                                                                background-color:nth($backgoundColor,$i);
                                        }
}
@H_403_6@

2、用图片作为整屏的背景图片的处理方式:

 (1)width: 100%; height: 100%; //设置img为absolute,并设置图片高宽随浏览器窗口
 (2)background-position:center;background-repeat: no-repeat; background-size: cover; //设置图片样式引入为背景图片,设置background-size为cover 不过图片会有被切的部分;
 (3)height: auto; //width由js控制
@H_403_6@

3、界面内容垂直高度位置调整方式:

 transform: translateY(40%);
@H_403_6@

4、编写动效比较多的推广宣传页的步骤:

 (1)整体框架布局,分成多个模块(盒子),接下来再一个一个模块写
 (2)编写某一个模块1920*960下的静态结构
 (3)使用媒体查询处理960高度,不同阶段宽度的适应
 (4)使用resize,处理垂直位置: transform: translateY(40%);
 (5)制作动效
 (6)然后再做其他小模块,同样的方式处理。
 (7)最后微调整体的效果
@H_403_6@

5、PS的使用:

1) PS图片大小保持像素不变:
 (1)选中图片
 (2)ctrl+T,拉升压缩,或者输入按比例的高宽
 (3)保存为web
 2)PS模糊图片:http://jingyan.baidu.com/article/7f41ececd37e66593d095ce2.html
 (1)打开图片,选择滤镜中的场景模糊
 (2)改变圆轮白灰比例
 (3)保存为web
 3)PS修改图像颜色模式为RGB模式:图像-模式-RGB颜色
 4)PS画gif动图的方法:窗口-时间轴/动画,调出帧,对不同图层进行处理,保存为gif图
@H_403_6@

6、Angular.js:

(1)angular.module('myApp',[]);//空数组,代表没有引入其他的依赖
(2)ng-app='myApp'
(3)ng-model='name' //model 指令
       基础指令:
           ng-model
           ng-maxlength
           ng-minlength
(4){{name}}
 实现数据的双向绑定。
 例子:
      html:
 
    
{{name}},你好
js: angular.module('myApp',[]); @H_403_6@

7、同一项目组类似页面快速编写的步骤:

 (1)根据原型写相对规范的接口文档
 (2)复制页面布局、部分css、部分js
 (3)修改页面不同的名词或者类名、id名
 (4)修改js中不同的变量名称方法名称,参数,以及接口,同时对接口文档进行规范和微调
 (5)接口请求本地预先设置的json文件
 (6)预览页面,微调css,查看js报错,进行js微调
@H_403_6@

体会:

1、把动画效果进行了拆分,看起来比较有层次感了,总结了一套写动画的步骤。布局的最基础和重要的,首先要有布局,才能够对盒子里面的细节进行拆分和优化分解。
2、sass函数的使用,减少了很多多余的代码。已经基本上不用css,全用sass写样式了。
3、一些库的源文件,只要找到入口方法,后面看起来再复杂的代码也能够进行分解,理清执行顺序。
4、接口的规范或者其他页面编写的规范,使得之前复杂的代码,做起来和流水线一样简单,增强了复用方式和形式的复用。
5、现在对本项目的页面编写都基本熟悉了,对自己来说都是简单的事情,接下来目标应该是,把简单的工作,以最快的速度和最好的质量来完成,也许这就是简单的事情重复做带来的好处。是否可以从中找到技巧最好。
6、这个月又是做自己熟悉东西,并没有什么其他新鲜的,新的技术灌入。通过对过去填的坑的填埋、以前实现不了的功能优化、以及重复做简单的东西,慢慢形成了一种工作步骤,做到的是,以后再做类似的东西会做到心里有数的了。总结出这些既定的方法和步骤,有助于快速的完成重复的工作。
7、整体目标就是:(1)重复事情,总结经验来做,做到高效高质量。(2)其他,平时多积累新东西,做到新任务来的时候不会慌乱。看来又要开始看视频来学习了。
8、整体任务基本上都在:写页面、优化页面、测试,这三个点上。
@H_403_6@

猜你在找的程序笔记相关文章