📜  如何使用 HTML 和 CSS 设计 Meet the Team 页面?

📅  最后修改于: 2021-08-30 11:54:40             🧑  作者: Mango

创建结构:在本节中,我们将为会议团队页面创建一个基本结构。我们将附加图标并放置将放置在会员卡上的文本将添加按钮。

  • Font Awesome 中图标的 CDN 链接:
  • HTML 代码: HTML 代码用于创建满足团队页面的结构。由于它不包含 CSS,所以它只是一个基本结构。我们将使用一些 CSS 属性使其具有吸引力。
    
    
       
    
        
       
        
        
    
       
    
        
            

    Meet The Team Page

            
                         
                
                    
                                             
                            

    Mike Tyson

                            

    CEO & Founder

                            

                                Feel your customer make                             them happy                         

                                                 
                    
                
            
                         
                
                    
                                             
                            

    Ching Lee

                            

    Developer Head

                            

                                A website should be user-friendly                              and attractive                         

                                                 
                    
                
                    
                    
                                             
                            

    Hashim Ahmed

                            

    Content Head

                            

                                Content should be popular                             and trending                         

                                                 
                    
                
                
                    
                                             
                            

    Rihana Gomez

                            

    Marketing Head

                            

                                Sell the product like                             Greatest Mary Kay Ash                         

                                                 
                    
                
            
        
       

设计结构:在上一节中,我们已经创建了团队页面的基本结构的结构,并且已经为成员添加了图标。在本节中,我们将根据需要添加 CSS 属性来设计卡片。

  • CSS 代码: CSS 代码用于制作有吸引力的团队页面。此 CSS 属性用于使卡片时尚且响应迅速。
    
    

结合 HTML 和 CSS 代码:此示例结合了 HTML 和 CSS 代码来设计团队会议页面。



   

    
   
    
    
  
    

   

    
        

Meet The Team Page

        
                     
            
                
                                         
                        

Mike Tyson

                        

CEO & Founder

                        

                            Feel your customer make                             them happy                         

                                             
                
            
        
                     
            
                
                                         
                        

Ching Lee

                        

Developer Head

                        

                            A website should be user-friendly                              and attractive                         

                                             
                
            
                
                
                                         
                        

Hashim Ahmed

                        

Content Head

                        

                            Content should be popular                             and trending                         

                                             
                
            
            
                
                                         
                        

Rihana Gomez

                        

Marketing Head

                        

                            Sell the product like                             Greatest Mary Kay Ash                         

                                             
                
            
        
    
   

输出: