语义 UI 卡链接变体

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

Semantic UI 中的卡片通常用于显示 Web 内容，就像扑克牌一样。语义 UI 为我们提供了许多变体的卡片，卡片中包含不同的内容。在本文中，我们将了解 Semantic UI Card Link 变体并了解实现以及代码示例和输出。

Semantic UI 中的这张卡片的设计方式是卡片中的全部内容都链接到另一个网站，即一旦您点击卡片的内容或卡片的任何部分，您将被重定向到另一个页面将其链接到。 Semantic UI Card Link Variation 中的内容如下。

语义 UI 卡链接变体内容类：

• 链接：它 启用悬停时移动的举牌。

注意：如果我们希望创建一张卡片，在点击时应该重定向到另一个页面，请用 HTML 标记将整个卡片括起来，以便它指向链接的页面。

句法 ：

  

   ....
  

示例1：我们可以在标题类中包含标题，在描述类中包含描述，在额外内容类中包含附加信息，如下例所示。我们可以观察到，我们一点击卡片就会被重定向。

HTML

    Semantic-UI Card Link Variation
    
     
    
    
    

  

        
           GeeksforGeeks   
           Semantic UI Card Link Variation  
         
         
              
              GeeksforGeeks   
                 
                 
                   Website for interview preparation
                    
              
                 
                     
                    Semantic UI is an open-source framework that 
                    uses CSS and jQuery to build great user 
                    interfaces. It is the same as a bootstrap for 
                    use and has great different elements to use to 
                    make your website look more amazing.
                  
             
          
             
                 
                  
               GeeksforGeeks
              
          
        
              
    

输出：

语义 UI 卡链接变体

示例 2：在此示例中，我们可以观察到我们不会被重定向，但我们可以在悬停时观察卡片中的移动。

HTML

    Semantic-UI Card Link Variation
    
     
    
    
    

  

        
         GeeksforGeeks   
         Semantic UI Card Link Variation  
         
              
              GeeksforGeeks   
                 
                 
                    Website for interview preperation
                    
              
                 
                 
                Semantic UI is an open-source framework that
                uses CSS and jQuery to build great user interfaces. 
                It is the same as a bootstrap for use and has great
                different elements to use to make your 
                website look more amazing.
              
     
             
          
             
                 
                  
                GeeksforGeeks
              
             
            
    

输出 ：

语义 UI 卡链接变体

参考： https://semantic-ui.com/views/card.html#link-card