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">

• 在最底部引用wow.js或者wow.min.js，然后再下面再写一行javascript代码。（无需引用jQuery）注意WOW要大写

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

• 给需要动画的元素添加class名称

<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 从右往左、上来后固定到设定位置、透明度为设定值不变

• !important > 行内 > id选择器 > 类选择器 > 标签选择器

• 如果字体尺寸设置的单位是像素的话，在不同的屏幕分辨率下字体显示的效果不一样。因此建议使用em、rem等作为字体尺寸的设置

• 布局：子绝父相

• div的100%是从其上一级div的宽高继承来的，必须设置其上一级div的宽度或高度，否则无效。

• 在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，如果将css代码中的第一行设置为:

html,body{height:100%}

• CSS选择器：
  ① id选择器 #
  ② 类选择器 .
  ③ 标签选择器 p
  ④ 相邻选择器 +
  ⑤ 子选择器 >
  ⑥ 通配符选择器 *
  ⑦ 属性选择器a[rel] =""
  ⑧ 伪类选择器

• 顺序：L->V->H->A
  a:link{}
  a:visited{}
  a:hover{}
  a:active{}

• …待补充

附上前端学习路线图可供参考

前端资源分享-只为更好前端