reveal.js用html实现的方法

HTML演示文稿主体格式

1. 幻灯片的主体包含在:

<div  class="reveal">
  <div  class="slides">
...
  </div>
</div>

2. 每一个<section>就是一页普通的幻灯片，具体格式是：

<section>
幻灯片内容
</section>

3. 不过，这样的幻灯片是横向排列的，如果想要添加纵向的（子）幻灯片，要这样写：

<section>
    <section>
    第一页幻灯片
    </section>
    <section>
    第二页幻灯片（纵向）
    </section>
</section>

样式修改

1. 颜色

文字颜色（需写在片段类标签内），举例：

<p  style="color:颜色"></p>

背景颜色（需写在<section>标签内），举例：

<section  data-background="颜色">
...
</section>

2. 效果

幻灯片页面切换的过渡效果，举例：

<section  data-transition="效果">
...
</section>

ps：过渡效果有none(无)，fade(淡入)，concave(凹面)，convex(凸面)，slide(滑入)。

3. 片段样式

文字片段展示的特殊效果，以下是全部：

<p class="fragment grow">增大</p>

<p class="fragment shrink">缩小</p>

<p class="fragment fade-out">阅后消失</p>

<p class="fragment fade-up">向上出现</p>

<p class="fragment fade-right">向右出现</p>

<p class="fragment fade-visible">仅显示当前条目</p>

<p class="fragment" data-fragment-index="数字">片段出现顺序

4. 页面锚点（引用方法）

绝对引用：

<a href="#/8/2">点击到达第八个页面的第二个子页面</a>

<a href="#/some">点击到达id为some<section>页面</a>

相对引用

<a href="#"   class="navigate-left">点击向左</a>

<a href="#"    class="navigate-right">点击向右</a>

<a href="#"    class="navigate-up">点击向上</a>

<a href="#"    class="navigate-down">点击向下</a>

<a href="#"    class="navigate-prev">点击至上一页</a>

<a href="#"    class="navigate-next">点击至下一页</a>

6.快捷键（演示ptt）

全屏 f
退出全屏 Esc
上一页 p
下一页 n/空格
首页 Home
末页 End
缩略图 Esc或o
黑屏 b
演讲提示模式 s

vim导航键：h(左)，j(下)，k(上)，l(右)
帮助页面：?