【前端学习日记】用reveal.js实现制作网页幻灯片
生活随笔
收集整理的這篇文章主要介紹了
【前端学习日记】用reveal.js实现制作网页幻灯片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、效果展示
今天學習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>覺得有用別忘了點個贊😙
總結
以上是生活随笔為你收集整理的【前端学习日记】用reveal.js实现制作网页幻灯片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端学习日记】利用Vue实现跑马灯的效
- 下一篇： 在html中超链接_HTML 超级链接详