一、效果展示
今天学习reveal.js做了一个简单的网页幻灯片，至于reveal.js是什么，可以去这里看看/。
话不多说，上图：
二、重要代码讲解
1.导入样式表
<!-- stylesheet:定义一个外部加载的样式表 --><link rel="stylesheet" href="dist/reset.css"><link rel="stylesheet" href="dist/reveal.css"><!-- 主题样式：Black background, white text, blue links (default) --><link rel="stylesheet" href="dist/theme/black.css"><!-- 用于语法高亮代码的主题 --><link rel="stylesheet" href="plugin/highlight/monokai.css">
2.导入reveal.js和插件
<script src="dist/reveal.js"></script><script src="plugin/notes/notes.js"></script><script src="plugin/markdown/markdown.js"></script><script src="plugin/highlight/highlight.js"></script>
3.初始化reveal.js
Reveal.initialize({hash: true,//在初始化时，通过将其纳入插件数组，告诉reveal.js关于该插件的情况。plugins: [RevealMarkdown, RevealHighlight, RevealNotes],})
4.幻灯片内容
<div class="reveal"><div class="slides"><!-- 第一张幻灯片 --><section><img src="pic/Avatar.jpg"><h3>MY FIRST HTML PRESENTATION FRAMEWORK</h3><p><small>Created by <a href="/weixin_48276030?spm=1000.2115.3001.5343">XuanYuan YiXiang</a></small></p></section><!-- 第二张幻灯片 --><section><h2>What's RevealJs?</h2><p><small>Reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.</small></p></section></div></div>
三、全部代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>reveal.js</title><link rel="stylesheet" href="dist/reset.css"><link rel="stylesheet" href="dist/reveal.css"><link rel="stylesheet" href="dist/theme/black.css"><link rel="stylesheet" href="plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section><img src="pic/Avatar.jpg"><h3>MY FIRST HTML PRESENTATION FRAMEWORK</h3><p><small>Created by <a href="/weixin_48276030?spm=1000.2115.3001.5343">XuanYuan YiXiang</a></small></p></section><section><h2>What's RevealJs?</h2><p><small>Reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.</small></p></section></div></div><script src="dist/reveal.js"></script><script src="plugin/notes/notes.js"></script><script src="plugin/markdown/markdown.js"></script><script src="plugin/highlight/highlight.js"></script><script>Reveal.initialize({hash: true,plugins: [RevealMarkdown, RevealHighlight, RevealNotes],});</script></body></html>
觉得有用别忘了点个赞😙
