HTML 5 http html 5 doctor com CSS

  • Slides: 44
Download presentation

[HTML 5] 语义化标签 http: //html 5 doctor. com/

[HTML 5] 语义化标签 http: //html 5 doctor. com/

[CSS 3] appearance input[type=“checkbox”]{ -webkit-appearance: none; background: url(new-skin. png); } input[type=“checkbox”] : checked{ background:

[CSS 3] appearance input[type=“checkbox”]{ -webkit-appearance: none; background: url(new-skin. png); } input[type=“checkbox”] : checked{ background: url(new-skin-checked. png); }

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] flex-box

[CSS 3] column-box <div class="column-box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div>

[CSS 3] column-box <div class="column-box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div>

[CSS 3] column-box <div class="column-box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div>. column-box{ -webkit-cloumn-count:

[CSS 3] column-box <div class="column-box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div>. column-box{ -webkit-cloumn-count: 3; }

[CSS 3] column-box <div class="column-box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div>. column-box{ -webkit-cloumn-count:

[CSS 3] column-box <div class="column-box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div>. column-box{ -webkit-cloumn-count: 3; }

[CSS 3] media queries #node{ /* styles */ } http: //www. w 3. org/TR/css

[CSS 3] media queries #node{ /* styles */ } http: //www. w 3. org/TR/css 3 -mediaqueries/ http: //webdesignerwall. com/tutorials/css 3 -media-queries

[CSS 3] media queries #node{ /* styles */ } @media all and (min-width: 480

[CSS 3] media queries #node{ /* styles */ } @media all and (min-width: 480 px){ #node{ /* styles */ } } http: //www. w 3. org/TR/css 3 -mediaqueries/ http: //webdesignerwall. com/tutorials/css 3 -media-queries

[CSS 3] media queries #node{ /* styles */ } @media all and (min-width: 480

[CSS 3] media queries #node{ /* styles */ } @media all and (min-width: 480 px){ #node{ /* styles */ } } @media all and (min-width: 1024 px){ #node{ /* styles */ } } http: //www. w 3. org/TR/css 3 -mediaqueries/ http: //webdesignerwall. com/tutorials/css 3 -media-queries

[CSS 3] Code Cola http: //codecolapatterns. com/

[CSS 3] Code Cola http: //codecolapatterns. com/

[Java. Script] Java. Script美吗?

[Java. Script] Java. Script美吗?

[Java. Script] 框架 j. Query Mootools YUI Ext underscore http: //jquery. com/ Dojo

[Java. Script] 框架 j. Query Mootools YUI Ext underscore http: //jquery. com/ Dojo

[Java. Script] 元素查询 document. query. Selector(“#nav li: last-child”); document. query. Selector. All(“a[href$=‘. pdf’]”);

[Java. Script] 元素查询 document. query. Selector(“#nav li: last-child”); document. query. Selector. All(“a[href$=‘. pdf’]”);

[Java. Script] JSON var json = JSON. parse(xhr. response. Text); var data = JSON.

[Java. Script] JSON var json = JSON. parse(xhr. response. Text); var data = JSON. stringify(js. Object); xhr. send(data);

[Java. Script] Web Storage local. Storage. set. Item(“cache”, “even-js-and-css”); local. Storage. get. Item(“cache”); https:

[Java. Script] Web Storage local. Storage. set. Item(“cache”, “even-js-and-css”); local. Storage. get. Item(“cache”); https: //github. com/colorhook/code-snippet/tree/master/javascript/localstorage

[Java. Script] Zepto is expected to work in every modern browser except Internet Explorer.

[Java. Script] Zepto is expected to work in every modern browser except Internet Explorer. https: //github. com/madrobby/zepto

[Java. Script] Canvas http: //www. mhtml 5. com/2011/11/3387. html http: //colorhook. github. com/JPE/examples/Domino/

[Java. Script] Canvas http: //www. mhtml 5. com/2011/11/3387. html http: //colorhook. github. com/JPE/examples/Domino/

[Java. Script] 获取地理定位 function success(position){ var lat = position. coords. latitude, lng = position.

[Java. Script] 获取地理定位 function success(position){ var lat = position. coords. latitude, lng = position. coords. longitude, city = position. address. city; }; navigator. geolocation. get. Current. Position(success);

[Java. Script] 3 D传感器 var update = function(acceleration){ var x = acceleration. x, y

[Java. Script] 3 D传感器 var update = function(acceleration){ var x = acceleration. x, y = acceleration. y, z = acceleration. z; }; navigator. accelerometer. watch. Acceleration(update); http: //docs. phonegap. com/

[Java. Script] 查询通讯录 function success(contacts){ //console. log(contacts[0]. name); }; navigator. contacts. find( ['name', 'emails'],

[Java. Script] 查询通讯录 function success(contacts){ //console. log(contacts[0]. name); }; navigator. contacts. find( ['name', 'emails'], success); http: //www. w 3. org/2009/dap/

[Java. Script] 拍照 function success(data){ my. Image. Element. src = data[0]. url; }; navigator.

[Java. Script] 拍照 function success(data){ my. Image. Element. src = data[0]. url; }; navigator. device. capture. Image(success); http: //www. w 3. org/2009/dap/

[Java. Script] 噪声传感器 function noise. Changed(data){ //noise = data. value; }; navigator. system. watch(“Ambient.

[Java. Script] 噪声传感器 function noise. Changed(data){ //noise = data. value; }; navigator. system. watch(“Ambient. Noise“, noise. Changed); http: //www. w 3. org/2009/dap/

[Java. Script] 条形码扫描 http: //www. tudou. com/programs/view/2 gmmft. RYLB 0/

[Java. Script] 条形码扫描 http: //www. tudou. com/programs/view/2 gmmft. RYLB 0/

[Java. Script] 指南针 https: //github. com/colorhook/phonegap. app. compass

[Java. Script] 指南针 https: //github. com/colorhook/phonegap. app. compass