一、效果展示
今天学习reveal.js做了一个简单的网页幻灯片，至于reveal.js是什么，可以去这里看看https://revealjs.com/。
话不多说，上图：
二、重要代码讲解
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="https://blog.csdn.net/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="https://blog.csdn.net/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>
觉得有用别忘了点个赞😙