近期项目设计知识点总结：flex布局、canvas、引入外部字体、rem、匹配选择器等

一、伪类、伪元素

锚伪类 a:link a:visited a:hover a:active分别是链接未访问时，链接被访问过后，鼠标悬停在链接上，鼠标点击链接那一瞬间，需按顺序设置

二、js禁止移动端页面滑动

①、position:fixed

②、$(document).on('touchmove',function(e){
e.preventDefault();

})

//preventDefault()方法将通知浏览器不要执行与事件关联的默认动作（如果存在）

三、正则表达式实现表单验证

姓名只能为中文或英文：/^[\u4e00-\u9fa5A-Za-z0-9-_\s]*$/

电话号码：/^0?1[3|4|5|7|8][0-9]\d{8}$/

四、页面加载完毕再执行js

①、onLoad="main()"//将js写在main()里

②、$(function(){})

五、播放背景音乐

<audio src=""></audio>

属性：autoplay自动播放/controls显示播放控件/loop循环播放/preload页面加载后是否载入音频

六、当前页面事件只发生一次

点击播放音效，只播放一次

$("#container").bind('click',function(){
var audio=$("#audio")[0];
audio.play();
$(this).unbind('click');

});

七、引入外部字体

@font-face {

      font-family: <YourWebFontName>;//字体起名

      src: <source> [<format>][,<source> [<format>]]*;//source为路径，format为字体格式，用于浏览器识别

      [font-weight: <weight>];

      [font-style: <style>];

}

实例：

/*达到比较好的浏览器支持*/

@font-face {

  font-family: 'lvr';

  src: url('../font/LouisVuittonGlobal-Regular.eot'); /* IE9 Compat Modes */

  src: url('../font/LouisVuittonGlobal-Regulart.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../font/LouisVuittonGlobal-Regular.woff') format('woff'), /* Modern Browsers */

       url('../font/LouisVuittonGlobal-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */

       url('../font/abchanelcouture-reg-webfont.svg') format('svg'); /* Legacy iOS */     

  font-style: normal;

}

src: local(font name), url("font_name.ttf")//先从用户系统加载字体，失败再加载webfont

八、动画结束后保持结束状态

animation-fill-mode : forwards;

九、一些不常用的选择器

>子选择器，选择所有直接子类

+相邻选择器，选择同一个父元素下的紧邻的下一个元素

~匹配选择器，选择后面所有的同级指定元素

a.b{}class同时为a和b时生效

十、rem

1rem=根元素设置的px大小

在最前面加载一段js来监听浏览器动态修改html的font-size

<script>

    

(function (doc, win) {

        

var docEl = doc.documentElement,

                

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

                

recalc = function () {

                    
var clientWidth = docEl.clientWidth;

                    
if (!clientWidth) return;

                    
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

                

};

if (!doc.addEventListener) return;

       

win.addEventListener(resizeEvt, recalc, false);

        

doc.addEventListener('DOMContentLoaded', recalc, false);

    

})(document, w
4000
indow);

</script>

十一、css3动画



十二、3d变换

transform-style:flat|preserve-3d

flat表示所有子元素在2d平面呈现 

preserve-3d表示所有子元素在3d空间呈现、

backface-visibility:hidden;从正面看不见背面

backface-visibility:visible;从正面能看见背面

3D变换：

位移：translateZ()和translate3d(z,y,z)//z不能取百分值

旋转：rotateX(),Y,Z,rotate3d()

缩放：scaleZ(),scale3d()

矩阵：matrix3d()

opacity:0(除IE之外的浏览器) = filter:Alpha(opacity=0)(兼容IE)

transition和animation 注意区分

十三、canvas
http://blog.csdn.net/sinat_24239191/article/details/78711882
十四：flex布局
http://blog.csdn.net/sinat_24239191/article/details/78711898