html5 学习笔记

学习提纲

　　基础部分

　　1、新的的书写规范和语义

　　2、新的标签和属性

　　3、css3的新的特性

　　4、变形

　　5、动画

　　　　6、盒子布局和多栏布局 (垂直居中)

　高级部分

　　　　1、响应式布局(Media Queries)相关样式

　　　　2、cavas 绘图

　　　　3、html5事件（触摸事件）

　　　　4、通信API和本地存储

1、最近需要做一个触摸应用的项目，记录一些触摸应用项目笔记

2、学习资源

　　http://www.html5rocks.com/zh/mobile/touch/  一个简短的html 5教程

　　

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

　　一个简单的拖动代码

时间有限记录几个重要的东西、

　　1、变形（4中变形方式）

　　

			-webkit-transform:translate(80px); /*移动*/
			-webkit-transform:rotate(45deg);  /*旋转*/
			-webkit-transform:scale(2,0.5);   /*放大*/
			-webkit-transform:skew(30deg,30deg);  /*倾斜*/
			/*如果使用多个变形直接放到一行 即可*/
			-webkit-transform:translate(80px) rotate(45deg) scale(2,0.5) skew(30deg,30deg); /*移动*/*/
			

　　2、动画

　　　　2.1 transform 动画

　　　　　　

            -webkit-transform:rotate(45deg);  /*旋转*/
            -webkit-transition:
            -webkit-transform  0.2s linear;

　　　只是需要在属性之间变化，只能有一个属性的动画

　　　　2.2 animation 动画

　　　　　采用关键帧动画，先定义关键帧在定义动画

　　　　

　　　　　/×定义关键帧×/
        @-webkit-keyframes t_color{
            0%{
                background:#f60;
            }
            50%{
                background:#f00;
            }
            100%{
                background:#ccc;
            }
        }
　　　　
　　　　

　　　　应用样式

        .div2:hover{
            -webkit-animation:t_color 2s linear;
        }

　　3、分栏目

　　

        -moz-column-count:2;         /* 把文档流分栏布局     */
        -webkit-column-count:2;
        -moz-column-20em;
        -webkit-column-20em; //栏的宽度
        -moz-columz-gap:2em;  //分隔间距
        -webkit-column-gap:2em;  
        -moz-column-rule:1px red solid; //分隔线
        -webkit-column-rule:1px red solid;

　　4、垂直居中

　　　　　首先要定义为 box 模型

　　

        display:-webkit-box;
        -webkit-box-align:center;
        -webkit-box-pack:center;

　　5、box-sizing 盒子模型

　　　

box-sizing: border-box;

　　可以做到像IE盒子模型那样的实际宽度由width 决定不会由padding 和 border 影响