如何建立幻燈片

本文將向您展示如何結合使用 Vite 和 Reveal.js 來快速建立一個簡單而功能強大的網頁演示文稿系統，讓您能夠通過 HTML 和 Markdown 創建精美的幻燈片。

以下分享的程式為靜態網頁，如果要用 Google 試算表打造自動更新的投影片網站，請參考這本書的第7.4章節內...

要創建一個 Markdown 幻燈片，請在你的 <section> 元素中添加 data-markdown 屬性，並將內容包裹在 <textarea data-template> 中，如下例所示。

/* 幻燈片容器 */ .slideshow-container max-width: 1000px; position: relative; margin: auto; } /* 預設隱藏圖片 */ .mySlides display: none; } /* 下一個 & 上一個按鈕 */ .prev, .next cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 1

文法 使用者可以依照以下語法，只使用HTML和CSS來建立投影片。 ... 在上述語法中，'slides' div 包含多個幻燈片。 我們根據 'slides' div 包含的幻燈片總數定義了 'slides' div 的寬度。 此外，我們也為幻燈片 div 新增了動畫。

在剛開始學習網頁設計的時候，網頁跑馬燈肯定是必學的基礎，透過跑馬燈的點綴，可以輕鬆的讓網頁呈現效果生動起來，而且應用也是相當的廣泛，例如最新消息的呈現方式也可以採用跑馬燈的技巧，這裡教大家透過 HTML marquee 語法來製作跑馬燈的效果。

在頁面上越來越多地使用圖像演示或幻燈片來顯示很多內容，而不必使所有內容都擁擠，而是在我們必須顯示的所有內容之間旋轉。