HTML 和 CSS 如何使用 WebSlides 创建漂亮的 HTML 和 CSS 演示文稿

本文由Ralph Mason、Giulio Mainardi和Mikhail Romanov进行了同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ 演示是向观众提供信息的最佳方式之一。格式简短而清晰，由易于理解的小块组成，这使得所讨论的任何主题都引人入胜且更容易理解。演示文稿可以包含各种数据，由许多不同的元素表示，例如表格、图表、图表、插图、图像、视频、声音、地图、列表等，所有这些都为这种表达媒介提供了极大的灵活性。 特别是在网络上，演示文稿在很多情况下都会派上用场，并且您可以使用大量工具来创建一些漂亮的演示文稿。今天，我将向您介绍WebSlides — 一个小型而紧凑的库，具有一组很好的即用型组件，您可以利用它们来构建精心制作且有吸引力的 Web 演示文稿： WebSlides“就是讲述故事，并以一种美妙的方式分享它。” 事实上，WebSlides 的主要好处之一是您可以通过多种不同的方式精美地分享您的故事。使用同一个架构（40 多个具有语义类的组件以及干净且可扩展的代码），您可以创建作品集、登陆页面、长格式、访谈等。




此外，您还可以通过与第三方服务和工具（例如Unsplash、Animate.css、Animate On Scroll等）结合来扩展 WebSlides 的功能。 WebSlides 易于学习且使用起来很有趣。现在让我们看看它的实际效果。 网络幻灯片入门 首先，首先下载 WebSlides。然后，在根文件夹中创建一个新文件夹并将其命名为presentation. 在新创建的presentation文件夹中，创建一个新文件并将其命名为index.html. 现在，输入以下代码，其中包含对 WebSlides 文件 WhatsApp 号码数据 所需的引用（确保文件路径对应于您设置中的文件夹结构）现在，您已经准备好出发了。 使用 WebSlides 创建 Web 演示文稿 在本节中，您将创建一个简短但完整的演示文稿，解释为什么 SVG 是 Web 图形的未来。 注：如果您对SVG感兴趣，请查看我的文章：SVG 101：什么是SVG？以及如何在 Adob​​e Illustrator 中优化和导出 SVG。 您将一步一步地处理每张幻灯片。让我们从第一个开始。 幻灯片 1 Learn to Code with JavaScript 第一张幻灯片非常简单。它只包含一句话里面的每个家长<article id="webslides">都会创建一张单独的幻灯片。





在这里，您使用了 WebSlides 库中的两个类，即bg-gradient-r和aligncenter，分别应用径向渐变背景并将幻灯片内容与中心对齐。 WebSlides 演示演示：幻灯片 1 幻灯片 2 第二张幻灯片解释了 SVG 是什么：面的代码使用content-left和content-right类将内容分成两列。另外，为了使上述类正常工作，您需要使用该类来包装所有内容wrap。在左侧，代码用于text-subtitle使文本全部大写，并text-intro增加字体大小。右侧由说明性图像组成。 WebSlides 演示演示：幻灯片 2 幻灯片 下一张幻灯片使用网格组件创建两列上面的代码片段展示了如何使用grid和column类来创建具有两列的网格。在第一列中，该style属性将文本左对齐（请注意元素aligncenter上的类如何<section>级联到其.column子元素，这会导致幻灯片内的所有文本居中对齐）。在第二列中，该类browser使说明性图像看起来像屏幕截图。示演示：幻灯片 5 幻灯片 6 在此幻灯片中，使用该类通过Unsplash 服务background嵌入图像作为背景。使用该类将标题放在浅色、透明的背景上。