html5和css3入门知识.pptVIP

html manifest = rubiks.manifest rubiks.manifest CACHE MANIFEST/demo/rubiks/style.css/demo/rubiks/jquery.min.js/demo/rubiks/rubiks.js#version 15 /demo/rubiks database storage(客户端数据库SQLite) WebKit中已经实现 var database = openDatabase(db, 1.0); database.executeSql(SELECT * FROM test, function(result){ database.executeSql(DROP TABLE test);}); key/val存储() sessionStorage(window based) localStorage(domain based) WebKit/IE8/Firefox 3.5已经实现 .setItem(key, value) .getItem(key) .postMessage(message, targetOrigin) .onMessage(event) event.data == message document.getElementById(iframe).contentWindow.postMessage(my message, ); window.addEventListener(message, function(e){ if(e.origion !== ){ return; } alert(e.origion+ said: +e.data);}, false); CSS3 1996 1998 2001 CSS1.0 CSS2.0 CSS3.0 Cascading Style Sheets /Demo/Speech/Demo/CSS-Browser-Support.png 选择器 布局 样式 动画 其它 属性选择器 a[href$=.pdf], a[href^=mailto], a[class*=‘item’] 兄弟选择器 Div~img 伪类选择器 :nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even) 圆角 border-radius: 3px -moz-border-radius-topleft -webkit-border-top-left-radius 阴影 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) text-shadow: 2px 2px #444, 3px 3px #555 自定义字体 @font-face{font-family: Adam, src:url(adam.ttf);}p{font-family:Adam, serif;} 文本换行 word-wrap: normal|break-word 边框背景 border-image: url(border.png) 27 27 27 27 round round; 渐变 background: -moz-linear-gradient(20%, center, 30%, center, from(blue), to(yellow)) no-repeat; 背景 background-size: 100px 50px; background-origin: content-box|border-box|padding-box; background-clip: border-box|padding-box 透明 opacity: 0.5; RGBA color: rgba(0, 255, 0, 0.5); HSL/A color: hsl(240, 50%, 50%); hsla(240, 50%, 50%, 0.5) 调整元素尺寸 resize: both|horizontal|vertical 盒模型 box-sizing: content-box|border-box; 网格模型 column-count: 3; column-width: 13em; column-gap: 1em; column-rule: 1px solid black; CSS Table Display #content{display: table;}#main{display: table-cell; width:620px; padd