NCDA前端学习心得

本文主要是介绍NCDA前端学习心得，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是我的第二个博客，用来记录自己在项目前端开发过程中遇到的问题、解决对策以及开发心得。

千里之行，始于足下。好记性不如烂笔头。

我历经一个月左右的学习，巩固了自己已有的前端知识体系：HTML5，CSS3，JavaScript，Jquery，为以后的工作打下了坚实的基础

规范项目结构
对于一个待开发的页面，首先要想清楚页面的布局是怎样的，例如（T型布局，三栏型布局，左右布局型，上下布局型等等）。切忌边敲代码边想布局。建议可以用PS、AI、Balsamiq Mockups等设计好页面，再切图作为Images素材。
调试工具：chrome。
IDE:webstorm
chrome不仅可以模拟所有页面宽度和高度。默认中文最小的字号是12px，当小于12的时候都会以12px来显示
响应式布局使用@media来实现。@media可以针对不同的屏幕尺寸设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

	@media mediatype and|not|only (media feature) {CSS-Code;}

对于距离问题，尽量用padding值或者margin值去调整，不要用空格（&nbsp)或者填充内容
在写移动端页面的时候js代码要用对象方法书写js，利于代码规范以及后期维护
wow.js是一款juery特效插件，在页面发生滚动时产生一些动画效果。wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css。

	 <link rel="stylesheet" type="text/css" href="css/animate.min.css">

	<script type="text/javascript" src="js/wow.min.js"></script><script type="text/javascript">new WOW().init();</script>

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>

data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。
几种常用的动画class类名：

wow bounceIn
从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值

wow flipInX 原位置后仰前栽、透明度从100%变化至设定值

wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变

wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）

wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变

wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）

wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变

html,body{height:100%}