【前端学习日记】用reveal.js实现制作网页幻灯片_js实现ppt效果的网页页面样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_48276030/article/details/120189952

本文介绍了如何使用reveal.js框架制作网页幻灯片，详细讲解了导入样式表、初始化代码和幻灯片内容的步骤，并提供了一个简单的示例，包括导入必要的CSS和JS文件，以及幻灯片内容的HTML结构。通过这个教程，读者可以快速掌握使用reveal.js创建互动式HTML演示文稿的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

今天学习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>