<!DOCTYPE html>
<!--
Copyright 2011 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Original slides: Marcin Wichary (mwichary@google.com)
Modifications: Chrome DevRel Team (chrome-devrel@googlegroups.com)
Alex Russell (slightlyoff@chromium.org)
Brad Neuberg
-->
<html manifest="cache.appcache">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>HTML5 Presentation</title>
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link id="prettify-link" href="src/prettify/prettify.css" rel="stylesheet" disabled />
<link href="styles/fonts.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/presentation.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/common.css" rel="stylesheet" type="text/css" media="screen" />
<link class="theme" href="styles/default.css" rel="stylesheet" type="text/css" media="screen" />
<link class="theme" href="styles/moon.css" rel="stylesheet" type="text/css" media="screen" />
<link class="theme" href="styles/sand.css" rel="stylesheet" type="text/css" media="screen"/>
<link class="theme" href="styles/sea_wave.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="flex-container">
<nav id="helpers">
<button title="Previous slide" id="nav-prev" class="nav-prev">⇽</button>
<button title="Jump to a random slide" id="slide-no">5</button>
<button title="Next slide" id="nav-next" class="nav-next">⇾</button>
<menu>
<button type="checkbox" data-command="toc" title="Table of Contents" class="toc">TOC</button>
<!-- <button type="checkbox" data-command="resources" title="View Related Resources">☆</button> -->
<button type="checkbox" data-command="notes" title="View Slide Notes">✏</button>
<button type="checkbox" data-command="source" title="View slide source">↻</button>
<button type="checkbox" data-command="help" title="View Help">?</button>
</menu>
</nav>
<div class="slides">
<div id="presentation-counter">Loading...</div>
<div class="slide" id="landing-slide">
<section class="middle">
<p>Cascading Style Sheet</p>
<p>Press <span id="left-init-key" class="key">→</span> key to advance.</p>
<p id="disclaimer-message">Having issues seeing the presentation? Read the <a href="disclaimer.html">disclaimer</a></p>
</section>
<aside class="note">
<section>
Welcome! (This field is for speaker notes and commentary.)
</section>
</aside>
</div>
<div class="slide" id="startIntro">
<header>Today,we may get...</header>
<section>
<ul>
<li><span class="key">→</span><span class="html">概念性了解HTML5,CSS3</span></li>
<li><span class="key">→</span><span class="html">初步认识CSS3的新功能</span></li>
<li><span class="key">→</span><span class="html">激发同学们对CSS3的兴趣</span></li>
</ul>
</section>
<h2 class="second">Today, we will cover...</h2>
<section>
<ul>
<li><span class="key">→</span><span class="html">CSS3 Modules</span></li>
<li><span class="key">→</span><span class="html">CSS3 New Elements</span></li>
<li><span class="key">→</span><span class="html">Examples</span></li>
</ul>
</section>
</div>
<div class="slide" id="timeline-slide">
<header>Rough Timeline of Web Technologies</header>
<section>
<ul id="timeline">
<li data-auto><span class="year">1991</span> <span class="html">HTML</span></li>
<li data-auto><span class="year">1994</span> <span class="html">HTML 2</span></li>
<li data-auto><span class="year">1996</span> <span class="css">CSS 1</span> + <span class="js">JavaScript</span></li>
<li data-auto><span class="year">1997</span> <span class="html">HTML 4</span></li>
<li data-auto><span class="year">1998</span> <span class="css">CSS 2</span></li>
<li data-auto><span class="year">2000</span> <span class="html">XHTML 1</span></li>
<li><span class="year"><em class="stroke">2002</em></span> <span class="css">Tableless Web Design</span></li>
<li><span class="year"><em class="stroke">2005</em></span> <span class="js">AJAX</span></li>
<li><span class="year"><em class="stroke">2009</em></span> <span class="html">HTML 5</span></li>
</ul>
</section>
</div>
<div class="slide" id="formula-intro-slide">
<section class="middle formula" data-build>
HTML5 ~=
<span class="html">HTML</span>
+
<span class="css">CSS</span>
+
<span class="js">JS</span>
</section>
</div>
<div class="slide" id="test">
<header>CSS3 Moduleees</header>
<section>
<iframe id="cssF" src="demo.html"></iframe>
</section>
</div>
<div class="slide" id="ModulesIntro">
<header>CSS3 Modules</header>
<section>
<div class="beforeClass boxSpan">选择器</div>
<div class="beforeClass boxSpan">盒模型与布局</div>
<div class="beforeClass boxSpan">背景和边框</div>
<div class="beforeClass boxSpan">2D、3D变换</div>
<div class="beforeClass boxSpan">动画</div>
</section>
</div>
<div class="slide transitionSlide" id="css3-title">
<section class="middle">
<h2>Cascading Style Sheet</h2>
<div id="logo-container2">
<div id="refelect">
CSS3奇幻之旅
</div>
</div>
<img src="http://www.html5rocks.com/static/images/identity/classes_64/HTML5_Styling_64.png" title="HTML5 Styling" alt="HTML5 Styling">
</section>
</div>
<div class="slide styling" id="css-selectors">
<header><span class="css">CSS</span> <h1>CSS Selectors</h1></header>
<section class="left">
<h2>Selectors</h2>
<pre>.row:<b>nth-child(<select onchange="changeOdd(event)"><option value="row2">even</option>
<option value="row">odd</option></select>)</b> {
background: #dde;
}
.row:<b>nth-child(...):before</b> {
content:"*";
}
</pre>
<script defer>
function changeOdd(event) {
var row1 = document.getElementById('Row1');
var row2 = document.getElementById('Row2');
var row3 = document.getElementById('Row3');
var row4 = document.getElementById('Row4');
row1.className = row1.className.replace('row', ' ');
row2.className = row2.className.replace('row', ' ');
row3.className = row3.className.replace('r
css3-instroction.zip （53个子文件） 
css-instroction153 fonts 
MarketingScript.ttf 54KB BebasNeue.otf 48KB ubuntu.ttf 311KB MEgalopolisExtra.woff 42KB media src fonts leaguegothic 
leaguegothic-webfont.svg 48KB leaguegothic-webfont.eot 41KB leaguegothic-webfont.ttf 41KB leaguegothic-webfont.woff 22KB junction02 junction02-webfont.woff 24KB junction02-webfont.ttf 43KB junction02-webfont.eot 43KB junction02-webfont.svg 57KB inconsolata Inconsolata.ttf 31KB yanone YanoneKaffeesatz-Regular.ttf 85KB borderimage 
border_image_3.png 1KB border_image_2.png 4KB border_image_1.png 508B border_image_5.png 6KB border_image_4.png 720B
demo.html 11KB disclaimer.html 1KB js utils.js 17KB Blazed.ttf 110KB scripts main.js 2KB excss.js 36KB
face.gif 2KB imgs texture.png 480KB whiteButton.png 978B overlay.png 8KB dashed.png 19KB throbber.gif 825B
tv-border.jpg 8KB style.css 6KB image 07.jpg 50KB 06.jpg 53KB 04.jpg 35KB 05.jpg 41KB 08.jpg 52KB progress.png 130B 01.jpg 60KB demos.css 4KB favicon.ico 1KB sky.gif 107KB styles default.css 979B sand.css 1KB css.png 543B sea_wave.css 941B common.css 24KB fonts.css 1KB presentation.css 6KB moon.css 2KB css.html 49KB snow.gif 981B
- 1
- 2
- 3
- 4
- 5
前往页