時(shí)間：2023-09-28 06:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-28 06:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
如何使用js制作精美的網(wǎng)頁(yè)版PPT：
在線咨詢(xún)
<html> <head> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="dist/reveal.js"></script> <script> Reveal.initialize(); </script> </body></html>這樣通過(guò)短短幾行代碼, 我們就能實(shí)現(xiàn)一個(gè)兩頁(yè)的PPT. <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section> Slide 2-1 </section> <section> Slide 2-2 </section> </section> <section>Slide 3</section> </div></div>效果如下圖所示: <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section data-transition="fade"> Slide 2-1 </section> <section data-transition="convex"> Slide 2-2 </section> <section data-transition="concave"> Slide 2-3 </section> <section data-transition="zoom"> Slide 2-4 </section> </section> <section>Slide 3</section> </div></div>效果如下: <body> <div class="reveal"> <div class="slides"> <section data-background-image="./img/z1.png" data-background-opacity=".4"> <h1>趣談前端</h1> <p>徐小夕</p> </section> <section> <section data-transition="fade" data-background-color="orange"> <h1>趣談前端 Javascript</h1> </section> <section data-transition="convex" data-background-color="green"> <h1>趣談前端 Vue</h1> </section> <section data-transition="concave" data-background-color="#61dafb"> <h1>趣談前端 React</h1> </section> <section data-transition="zoom" data-background-color="#b32535"> <h1>趣談前端 Angular</h1> </section> </section> <section> <h1>NodeJS</h1> <pre><code data-trim data-noescape> const fs = require('fs') const Koa = require('koa') const app = new Koa() </code></pre> </section> <section> <h3>設(shè)計(jì)模式</h3> <p class="fragment">觀察者模式</p> <p class="fragment">工廠模式</p> <p class="fragment">迭代器模式</p> </section> <section> <h4>數(shù)據(jù)結(jié)構(gòu)與算法</h4> </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> // More info about initialization & config: // - https://revealjs.com/initialization/ // - https://revealjs.com/config/ Reveal.initialize({ hash: true, // Learn about plugins: https://revealjs.com/plugins/ plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] }); </script></body>關(guān)鍵詞：精美,使用
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
