语义 UI 卡颜色变化

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

语义 UI Card 元素以类似于使用语义 UI 类的扑克牌的方式显示站点内容。在本文中，我们将讨论语义 Ui 卡片的颜色变化。

为了创建语义 UI 卡片的彩色变体，我们将所需的颜色与卡片类一起用作一个类。例如，如果我们需要语义 UI 卡片的红色变体，我们使用红色和卡片作为父

的类。这使得卡片底部边框阴影的颜色成为上述颜色。

Semantic-UI Card Colored Variation 类：

• red：该类用于设置颜色为红色。
• 橙色：该类用于设置橙色。
• 黄色：该类用于设置黄色。
• Olive：该类用于设置橄榄色。
• green：该类用于设置颜色为绿色。
• 青色：这个类用于设置颜色青色。
• blue：该类用于设置颜色为蓝色。
• 紫色：该类用于设置颜色为紫色。
• 紫罗兰：这个类用于设置紫罗兰色。
• pink：该类用于设置粉色。
• brown：该类用于设置颜色为棕色。
• gray：该类用于设置颜色为灰色。
• black：该类用于设置颜色为黑色

句法：

    content....

示例：此示例演示语义 Ui 卡的各种颜色变体。

HTML

 

  

 

  
    
Geeksforgeeks
    
      Semantic UI card colored-variations
    


  
 
  

    

      

        
      
       
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
 
    

      

        
      
 
      

        Geeksforgeeks Card
      
    
  

 

输出：

输出

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