7. MIME Type: text/cache-manifest

14. /* Tablet (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* Tablet (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } teegallery.com

15. Title Stats Score Board

16. HTML & CSS for the gaming board Game Title Score Stats Board Controls #grid { display: -ms-grid; -ms-grid-columns: auto 1fr; -ms-grid-rows: auto 1fr auto; } #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center }

18. Merging grid & media queries @media (orientation: landscape) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start } #board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center } } @media (orientation: portrait) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 2 } #stats { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 } #board { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 2 } #controls {-ms-grid-column: 1; -ms-grid-row: 4; -ms-grid-column-span: 2; -ms-grid-column-align: center } }

20. http://goldengridsystem.com/ http://cssgrid.net/ Less Framework http://lessframework.com/http://foundation.zurb.com/

22. TransitionsAnimations 特点 Delay Duration Timing function Properties to transition Delay Duration Timing function 事件 transitionEndanimationStart animationEnd animationIteration 如何工作 仅仅改变属性 通过 Keyframes: 哪一个需要改 变, 改变到什么状态, 何时改变

24. #id_of_the_html_element { animation-name: name_of_the_animation; animation-duration: number_of_seconds s; animation-iteration-count: number | infinite; }

31. function inferInputModel() { if (window.navigator.msPointerEnabled) { return 'pointer'; } else if (window.ontouchstart !== undefined) { return 'touch'; } else { return 'unknown'; } switch (inferInputModel()) { case 'pointer': element.addEventListener('MSPointerDown', msStart); element.addEventListener('MSPointerOut', msStop); document.addEventListener('MSPointerUp', msStop); document.addEventListener('MSPointerCancel', msStop); document.addEventListener('MSHoldVisual', preventDefault); break; case 'touch': element.addEventListener('touchstart', touchStart); document.addEventListener('touchend', touchStop); element.addEventListener('mousedown', mouseStart); element.addEventListener('mouseout', mouseStop); document.addEventListener('mouseup', mouseStop); break; default: element.addEventListener('mousedown', mouseStart); element.addEventListener('mouseout', mouseStop); document.addEventListener('mouseup', mouseStop); break; }