<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<!-- 主题CSS -->
<link rel="stylesheet" href="css/theme/night.css" id="theme">
<!-- 源代码高亮显示 -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
if( window.location.search.match( /print-pdf/gi ) ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/print/pdf.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
}
</script>
<!-- <style type="text/css">
h1,h2,h3,h4,h5,h6{
font-family: "微软雅黑";
}
</style>-->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<!-- —————————————————————————————————————————————————————————————— -->
<div class="slides">
<section>
<h1>Reveal.js框架介绍</h1>
<h3>首页</h3>
<p>
汉化：李响
</p>
</section>
<!-- —————————————————————————————————————————————————————————————— -->
<section>
<h2>咳咳，首先……</h2>
<p>
reveal.js 是一个可以制作酷炫的HTML演示的框架。你只要有一个支持CSS 3D切换的浏览器。
</p>
<aside class="notes">
额，这里有点注解。它们藏在你的演示里，但是你可以打开注解窗口。（请按“S”键）
</aside>
</section>
<!-- —————————————————————————————————————————————————————————————— -->
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>垂直滚动</h2>
<p>
Slides页可以藏在其他Slides页内部。
试试按下“down”吧~
</p>
</section>
<!-- —————————————————————————————————————————————————————————————— -->
<section>
<h2>地下一楼</h2>
<p>按up或者down️来切换。</p>
</section>
<!-- ————————————————————————————————— -->
<section>
<h2>地下二楼</h2>
<p>下面还有哦。</p>
</section>
<!-- ————————————————————————————————— -->
<section>
<h2>地下三楼</h2>
<p>好了，我们可以走了。</p>
<p>事实上，我们可以直接切换到下一个slides。</p>
</section>
<!-- ————————————————————————————————— -->
</section>
<!-- —————————————————————————————————————————————————————————————— -->
<section>
<h2>Slides</h2>
<p>
对编程水平要求不高。
</p>
</section>
<section>
<h2>概览模式</h2>
<p>
按 <strong>ESC</strong> 进入slides概览模式。
</p>
<p>
Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
</p>
</section>
<section>
<h2>在iPhone上也可以哦！</h2>
<p>
Try it out! You can swipe through the slides and pinch your way to the overview.
</p>
</section>
<section>
<h2>无序列表</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
<section>
<h2>有序列表</h2>
<ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>
</section>
<section data-markdown>
<script type="text/template">
## 支持 Markdown
For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
```
<section data-markdown>
## Markdown support
For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
</section>
```
</script>
</section>
<section id="transitions">
<h2>页面切换风格</h2>
<p>
You can select from different transitions, like: <br>
<a href="?transition=cube#/transitions">立方体cube</a> -
<a href="?transition=page#/transitions">翻页page</a> -
<a href="?transition=concave#/transitions">凹面concave</a> -
<a href="?transition=zoom#/transitions">放大zoom</a> -
<a href="?transition=linear#/transitions">线性linear</a> -
<a href="?transition=fade#/transitions">渐现fade</a> -
<a href="?transition=none#/transitions">无none</a> -
<a href="?#/transitions">默认3D</a>
</p>
</section>
<section id="themes">
<h2>多种主题</h2>
<p>
Reveal.js comes with a few themes built in: <br>
<a href="?#/themes">默认灰色</a> -
<a href="?theme=sky#/themes">粉蓝sky</a> -
<a href="?theme=beige#/themes">土豪金beige</a> -
<a href="?theme=simple#/themes">白底黑字simple</a> -
<a href="?theme=serif#/themes">衬线serif</a> -
<a href="?theme=night#/themes">纯黑night</a> <br>
<a href="?theme=moon#/themes">墨水蓝moon</a> -
<a href="?theme=solarized#/themes">乳黄solarized</a>
</p>
<p>
<small>
* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code><head></code> using a <code><link></code>.
</small>
</p>
</section>
<section>
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the background.
</p>
</section>
<section data-state="customevent">
<h2>Custom Events</h2>
<p>
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
</p>
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
</code></pre>
</section>
<section>
<section data-background="#007777">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported.
</p>
<a href="#" class="image navigate-down">
<img width="178" height="238" src="img/星空5.jpg">
</a>
</section>
<section data-background="img/星空5.jpg">
<h2>Image Backgrounds</h2>
<pre><code><section data-background="image.png"></code></pre>
</section>
<section data-background="img/星空5.jpg" data-background-repeat="repeat" data-background-size="100px">
<h2>Repeated Image Backgrounds</h2>
<pre><code style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
</section>
</section>
<section data-background="#4d7e65">
<h2>Background Transitions</h2>
<p>
Pass reveal.js the <code>backgroundTransition: 'slide'</code> config argument to make backgrounds slide rather than fade.
</p>
</section>
<section data-transition="linear" data-background="#8c4738" data-background-transition="slide">
<h2>Background Transition Override</h2>
<p>
You can override background transitions per slide by using <code>data-background-transition="slide"</code>.
</p>
</section>
<section>
<h2>智能引用</h2>
<p>
行内引用<q>
“The nice thing about standards is that there are so many to choose from”</q>
<p>块状引用</p>
</p>
<blockquote>
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
</blockquote>
</section>
<section>
<h2>代码高亮</h2>
<pre><code data-trim contenteditable>
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
}
</code></pre>
<p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
<section>
<h2>内部链接</h2>
<p>
You can link between slides internally,
<a href="#/2/3">转到第二页第三层</a>.
</p>
</section>
<section>
<section id="fragments">
<h2>分步显示</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<ol>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
<pre><code data-trim contenteditable>class="fragment"</code></pre>
<aside class="notes">
This slide has fragments which are also stepped through in the notes window.
</aside>
</section>
<section>
<h2>分步显示样式</h2>
<p>There's a few styles of fragments, like:</p>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p>
<p class="fragment current-visible">current-visible</p>
<p class="fragment highlight-current-blue">highlight-current-blue</p>
</section>
</section>
<section>
<h2>Spectacular image!</h2>
<a class="image" href="http://lab.hakim.se/meny/" target="_blank">
<img width="320" height="299" src="img/星空5.jpg" alt="star">
</a>
</section>
<section>
<h2>Export to PDF</h2>
</section>
<section>
<h2>休息一会！</h2>
<p>
按“B”来暂停演示。
</p>
</section>
<section>
<h2>项目链接</h2>
<ul>
<li><a href="http://slid.es">在线编辑器</a></li>
<li><a href="https://github.com/hakimel/reveal.js">GitHub源代码</a></li>
</ul>
</section>
<section>
<h1>THE END</h1>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
// Parallax scrolling
// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
// parallaxBackgroundSize: '2100px 900px',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>
网友评论