用HTML创建幻灯片

介绍

reveal.js是一个让你很容易用HTML创建漂亮页面的框架。点击此处查看Demo

开源地址：https://github.com/hakimel/reveal.js/

应用

下载最新版本的reveal.js。https://github.com/hakimel/reveal.js/releases
解压。打开index.html，修改。

以下是修改过的index.html。部分特点介绍请参见注释

<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>reveal.js</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/reveal.css"><link rel="stylesheet" href="css/theme/black.css"><!-- Theme used for syntax highlighting of code --><link rel="stylesheet" href="lib/css/monokai.css"><!-- Printing and PDF exports --><script>var link = document.createElement('link');link.rel = 'stylesheet';link.type = 'text/css';link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';document.getElementsByTagName('head')[0].appendChild(link);</script>
</head><body><!-- 幻灯片的内容需要包含在<div class="reveal"> <div class="slides">的标签中 --><div class="reveal"><div class="slides"><!-- 代码片段 --><section>Slider 1<pre><code data-trim>console.log('hello reveal.js!');</code></pre></section><!-- 逐段出现 --><section>Slide 2<p class="fragment">hello reveal.js</p><p class="fragment">hello section</p><p class="fragment">hello fragment</p></section><!-- 一个section代表一个页面。当setion中包含子section会在页面中纵向展示 --><section><section>slide 3_1</section><section>slide 3_2</section></section><!-- markdown支持 --><section data-markdown><script type="text/template">### 比你熟悉的 Surface Pro 更强大![图片](https://imgazure.microsoftstore.com.cn/_ui/desktop/static/img/1002newProduct/colorPicker2_2360.png)</script></section><!-- 修改背景 --><section data-background="https://cn.bing.com/th?id=OHR.BisonYNP_EN-CN9362503033_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=1920&h=1080&rs=1&c=4">Slider 5</section></div></div><script src="js/reveal.js"></script><script>// More info about config & dependencies:// - https://github.com/hakimel/reveal.js#configuration// - https://github.com/hakimel/reveal.js#dependenciesReveal.initialize({dependencies: [{ src: 'plugin/markdown/marked.js' },{ src: 'plugin/markdown/markdown.js' },{ src: 'plugin/notes/notes.js', async: true },{ src: 'plugin/highlight/highlight.js', async: true }]});</script>
</body></html>

关于更多reveal.js的介绍请参见reveal.js

用HTML创建幻灯片相关推荐

css 幻灯片_如何使用HTML，CSS和JavaScript创建幻灯片
css 幻灯片 A web slideshow is a sequence of images or text that consists of showing one element of the ...
如何使用Emacs Org模式和Reveal.js创建幻灯片
在过去的一年左右的时间里,我开始大量重新使用Emacs和Org模式包(用于记录笔记,组织自己等等). 我也开始将脚趾浸入水中,进行简短的演讲. 我一直在想如何将Emacs与演讲结合起来. 演示与文本编 ...
在Windows 7 Media Center中创建幻灯片放映
Are you looking for a nice way to create and display a slide show from your photo collection? Today ...
PowerPoint2007通过版式创建幻灯片
转载者: 如何用word做ppt课件来源: www.2ppt.cn PowerPoint2007通过版式创建幻灯片幻灯片版式是一种版式指南,它告诉PowerPoint 在 ...
如何创建幻灯片iPad版网站
如何创建幻灯片iPad版网站幻灯片被广泛用于各种场合为更好的体现出了其他诸如会议,照片分享和演讲.幻灯片显示做台式电脑上表现非常出色,但你可以得到最新的iPad设备上的完全一样出色的表现呢?不担心, ...
如何在 Mac 上的照片中创建幻灯片
幻灯片将您的静止图像和视频剪辑转换为具有声音.效果和过渡的引人入胜的动态电影.如果您有想要转换为幻灯片的照片和视频,可以使用 Mac 上的"照片"应用来制作.您甚至可以通过点击几下 ...
Photoshop: Editing Video and Creating Slideshows Photoshop：编辑视频和创建幻灯片 Lynda课程中文字幕
Photoshop: Editing Video and Creating Slideshows 中文字幕 Photoshop:编辑视频和创建幻灯片中文字幕Photoshop: Editing Vi ...
第1章第7节：如何通过大纲级别批量创建幻灯片 [PowerPoint精美幻灯片实战教程]
给一段文字设置相应的大纲级别,即可通过这段文字快速创建相应的幻灯片.首先在当前的Word文档中,输入一些文字内容. 使用键盘上的快捷键,全选这八段(八行)的文字. 点击段落选项设置图标,打开段落设置窗 ...
第9章第6节：完成目录页的制作并创建幻灯片切换效果 [PowerPoint精美幻灯片实战教程]
您将在本节完成目录页的制作,首先在打开的插入功能面板中,点击此处的文本框工具. 在此处按下并向右下方拖动,以绘制一个文本框. 然后在光标位置输入文字内容. 在定界框上点击,以选择这个文本框. 将字号设 ...
ubuntu桌面幻灯片_如何在Ubuntu中创建墙纸幻灯片
ubuntu桌面幻灯片 Just like Windows 7 and OS X, Ubuntu has the ability to create a slideshow wallpaper tha ...

用HTML创建幻灯片

介绍

应用

用HTML创建幻灯片相关推荐

最新文章

热门文章