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

📅  最后修改于: 2021-11-07 08:41:10             🧑  作者: Mango

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

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


  

    
  
    
    

  

    
        

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                         

                                                 
                
            
        
    
  


HTML


HTML


  

    
  
    
    
 
    

  

    
        

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


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

HTML



  

    
  
    
    
 
    

  

    
        

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                         

                                                 
                
            
        
    
  

输出:

支持的浏览器:

  • 谷歌浏览器
  • 微软边缘
  • 火狐
  • 歌剧
  • 苹果浏览器