用HTML创建幻灯片

介绍

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

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

应用

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

以下是修改过的index.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.jstitle>

	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/reveal.css">
	<link rel="stylesheet" href="css/theme/black.css">

	
	<link rel="stylesheet" href="lib/css/monokai.css">

	
	<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">

			
			<section>Slider 1
				<pre>
					<code data-trim>
						console.log('hello reveal.js!');
					code>
				pre>
			section>

			
			<section>Slide 2
				<p class="fragment">hello reveal.jsp>
				<p class="fragment">hello sectionp>
				<p class="fragment">hello fragmentp>
			section>

			
			<section>
				<section>slide 3_1section>
				<section>slide 3_2section>
			section>

			
			<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 5section>

		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#dependencies
		Reveal.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>

用HTML创建幻灯片_第1张图片
用HTML创建幻灯片_第2张图片
用HTML创建幻灯片_第3张图片

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

你可能感兴趣的:(工具,幻灯片,reveal.js)