📜  语义 UI 卡类型

📅  最后修改于: 2022-05-13 01:56:15.039000             🧑  作者: Mango

语义 UI 卡类型

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

当我们想要以不同形状和大小的卡片形式显示标题、图像等信息时,卡片是我们网站中必不可少的元素。

语义 UI 卡片类型:语义 UI中有两种类型的卡片。

  • 卡片:用于显示单张卡片。
  • 卡片:用于显示多张卡片。  

句法:

....
....

示例 1:在下面的程序中,我们将使用卡片类型制作一张卡片

HTML


  

    
    
    
    
    

  

  
    
        GeeksforGeeks     
           
Card
    
       
                             
                     
           
                                    GeeksforGeeks             
                Founded in 2009             
                                    
                GeeksforGeeks provides a variety of services                 for you to learn, thrive and also have fun such                 as Free Tutorials, Millions of Articles, Live,                 Online and Classroom Courses ,Frequent Coding                 Competitions,etc.             
        
                                 
  


HTML


  

    
    
    
    
    

  

  
    
        GeeksforGeeks     
           
Cards
    
                
                        
            
                                        
                    Sachin Tendulkar                 
                
                    Sport: Cricket                 
                                        
                    Sachin Tendulkar is known as                      the God of Cricket.                 
                                                                         
                                         Follow                 
            
        
                    
            
                                 
                    Roger Federer                 
                
                    Sport: Tennis                 
                                 
                    Roger Federer is the best Tennis                      player of the decade.                 
                                                                   
                                         Follow                 
            
                     
                    
                         
                
                                         Mo Salah                 
                
                    Sport: Football                 
                                 
                    Mo Salah has scored the most                      goals in Premier League.                 
                                                                   
                                         Follow                 
            
        
    
  


输出:

语义 UI 卡类型

语义 UI 卡类型

示例 2:在下面的示例中,我们将使用卡片类型制作多卡片。

HTML



  

    
    
    
    
    

  

  
    
        GeeksforGeeks     
           
Cards
    
                
                        
            
                                        
                    Sachin Tendulkar                 
                
                    Sport: Cricket                 
                                        
                    Sachin Tendulkar is known as                      the God of Cricket.                 
                                                                         
                                         Follow                 
            
        
                    
            
                                 
                    Roger Federer                 
                
                    Sport: Tennis                 
                                 
                    Roger Federer is the best Tennis                      player of the decade.                 
                                                                   
                                         Follow                 
            
                     
                    
                         
                
                                         Mo Salah                 
                
                    Sport: Football                 
                                 
                    Mo Salah has scored the most                      goals in Premier League.                 
                                                                   
                                         Follow                 
            
        
    
  

输出:

语义 UI 卡类型

语义 UI 卡类型

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