HTML5 中的 Web Slide Desk 是什么？

WebSlides 是一个开源库，用于创建具有 HTML 和 CSS 基本知识的演示文稿、登陆、目录、长格式和作品集。当我们有大量令人惊叹的第三方应用程序用于此目的时，您可能想知道 WebSlides 的必要性和重要性。我们可以很容易地推断出在互联网上展示我们的技能、想法和工作的不可或缺的重要性。如果我们可以使用紧凑、美观且易于使用的库来设计我们想要的展示会怎么样。简单的设计，最简单的共享，并且没有兼容性问题。 WebSlides 为我们做到了这一点！

方法：我们可以从头开始创建 WebSlides 设计或自定义演示。为了探索 WebSlides，我们将从头开始创建一些幻灯片。首先，我们将分别设计两张幻灯片。然后我们将设计第三个并将它们组合起来制作一个 Web Slide Desk。

让我们首先探索 WebSlides 的一些功能。

1. 背景：我们可以为幻灯片添加不同的背景：

• 在部分中添加类 bg-primary 以将 #44d 设置为背景。
• 在部分中添加类 bg-black-blue 以将 #123 设置为背景。
• 在部分中添加类 bg-gradient-v 以设置垂直渐变背景。
• 在部分中添加类 bg-gradient-r 以设置径向渐变背景。
• 在部分中添加类 bg-gradient-h 以设置水平渐变背景。
• 为具有低不透明度的透明背景添加深色类，为背景的跨度标签添加相对高不透明度的类光。
• 您还可以通过在视频标签中指定类 background-video 来使用视频作为背景。

通过在幻灯片部分指定适当的类，可以将更多颜色用作背景。我们可以通过在背景的 span 标签中使用适当的类来将背景放置在屏幕上的不同位置。其中一些课程是：

• 背景中心
• 背景中心顶部
• 背景中心底部
• 背景左
• 背景右上

2. Wrap：使用带有class wrap的div来布局内容和类正常工作。将内容放在此 div 中。

3.对齐：您可以在不同的位置对齐您的内容。您可以将其左对齐、右对齐或居中对齐。此外，您可以将其放置在幻灯片的顶部或底部。一些类是：

• 左内容
• 内容权
• 内容中心
• 滑顶式
• 滑底
• 左对齐
• 对齐
• 大小 30
• 大小 50

您也可以使用这些类的组合。

4. 动画：您可以在内容中使用不同的动画。只需将适当的类与您想要动画的内容一起使用。课程是：

• 淡入
• 淡入向上
• 放大
• 向左滑动
• 向右滑动

5. 排版：您可以使用语义排版类来呈现您的内容。所有这些类都使用 Roboto 字体，这就是我们在 head 标签中链接到它的原因。 text-subtitle 类将文本转换为大写字母。一些排版类如下：

• 文本登陆
• 文字介绍
• 文字阴影
• 文本数据
• 文本上下文
• 文本列
• 文本标签
• 文字衬线
• 文本向左拉
• 文本右拉

设计幻灯片的步骤：

1. 下载网页幻灯片。
2. 在根目录下创建一个 HTML 文件“yourFileName.html”。
3. 开始编码，将以下代码添加到 HTML 文件中。

在这里，我们链接到整个幻灯片中使用的 Roboto google 字体和 CSS。在进入代码之前，不要忘记阅读以下关键要点

• 创建一个 ID 为“webslides”的文章标签。
• 在本文中，每个父部分都表示一张单独的幻灯片。
• HTML 类属性用于应用所需的更改。

示例 1：在此示例中，我们将使用：

• 带有 id 网页幻灯片的文章标签。此标签用作所有幻灯片的容器。
• 部分标记。此标签表示单个幻灯片。
• 跨度标记。此标签设置幻灯片的背景。
• 带有类包装的 div 标签。此标签充当所有布局和管理整个内容的 div 标签的包装器。
• 具有两个类 content-center 和 zoomIn 的 div 标签。
  • content-center 集中了 div 的全部内容。
  • ZoomIn 为 div 的内容创建放大动画。
• 带有类文本字幕的 div 标签。此类将文本转换为大写字母。

索引.html

HTML

  

    
    
  
    
    
    
  
    
  
    
    
  
    

  

  
    
    

  
        
        

  
            
            
             
            

                

                    
HTML 5 Presentations
                    

                        
Using WebSlides
                    
                
            
        
    

  

输出：

幻灯片#1

你已经完成了第一张幻灯片。

示例 2：我们在这里使用，

• 具有 bg-white 类的部分标记。此标记表示具有白色背景的单个幻灯片。
• 带有类包装的 div 标签。此标签充当所有布局和管理整个内容的 div 标签的包装器。
• 具有两个类 card-50 和 bg-gray 的 Div 标签。
  • card-50 创建一张大小为 50 的卡片。
  • bg-gray 设置卡片的背景颜色为灰色。
  • 这个 div 包含一个图形标签和另一个 div 标签。
• 图标签包含卡片左侧的图像。
• 具有类 flex-content 的 div 标签。此标签包含卡片右侧的内容。
• Flex-content 类对内容进行相对布局。

索引.html

HTML

  

    
    
  
    
    
    
    
  
    
    
  
    

  

    
    

  
        
        

            

                

                    

                        
                    
                    

                        

                            Magic Of Nature
                        
                        

                            Don't you feel?
                        
  
                        

                            "God is the most beautiful, and 
                            beauty is the expression of God. 
                            If you can't appreciate beauty 
                            in the world how can you 
                            understand God?"
                        
  
                        

                            A qoute about Nature by Amit Ray.
                        
  
                        

                            Nature teaches more than she 
                            preaches. There are no sermons 
                            in stones. It is easier to get 
                            a spark out of a stone than a 
                            moral.
                            —John Burroughs
                        
                    
                
            
        
    

  

输出：

幻灯片#2

网络幻灯片台

Web Slide Desk 是 Web Slides 的组合。让我们创建一张新幻灯片，然后制作一个卡片组。在这里，我们将使用第一张和第二张幻灯片，创建一张新幻灯片并将它们组合起来创建一个 Web Slide Desk。

在第三张幻灯片中，我们正在使用，

• 具有 bg-gradient-r 类的部分。此标签为幻灯片设置径向渐变背景。
• 带有内容中心的 div。这个标签集中了 div 的内容。
• P 带有类 text-landing 和 text-shadow 的标签。这些标签将指定的效果应用于文本。
• 用于链接 Web 幻灯片 JS 的脚本标记。
• 脚本标签来初始化网页幻灯片。

索引.html

HTML

  

    
    
  
    
    
    
    
  
    
    
  
    
        .zoomIn {
            color: white;
            font-weight: bold;
        }
    

  

  
    
  
    
        
        
            
            
            
  
            
                
                    HTML 5 Presentations
                    
                          
Using WebSlides
  
                    
                
            
        
        
        
            
            
                
                    
                        
                    
                    
                        
                            Magic Of Nature
                        
                        
                            Don't you feel?
                        
  
                        
                            "God is the most beautiful, 
                            and beauty is the expression 
                            of God. If you can't appreciate 
                            beauty in the world how can you 
                            understand God?"
                        
  
                        
                            A qoute about Nature by Amit Ray.
                        
  
                        
                            Nature teaches more than she 
                            preaches. There are no sermons 
                            in stones. It is easier to get 
                            a spark out of a stone than a 
                            moral.
                            —John Burroughs
                        
  
                    
                
            
        
        
        
            
                GeeksforGeeks
            
            
                
                    Leave the road, take the trails.
                
  
                
                    —Pythagoras
                
  
            
        
    
    
    
    
        window.ws = new WebSlides();
    

  

输出：

网络幻灯片台

这不是故事的全部！您可以使用 WebSlides 做更多事情。前往您下载的网络幻灯片文件夹。探索更多类、组件和模板。球现在在你的球场上！