HTML |如何添加客户评价？

推荐信是来自用户的书面推荐，通常出现在网页的单独部分。在本文中，我们将学习如何在我们的网页上添加漂亮的响应式推荐。

通常，推荐包含用户的姓名、图片、他/她的身份（可选）以及最重要的他/她引用的文本。

添加 HTML：
我们将添加用户的姓名、个人资料图片、他/她的身份和他/她的大部分引用文本

    "
    
Chris Doe, CEO at XYZ.
    
"A Computer Science graduate who likes to make things simpler.
       When he's not working, you can find him surfing the web,
       learning facts, tricks and life hacks. He also enjoys
       movies in his leisure time."

  

    
    
John Doe CEO at ABC Company.
    
"A Computer Science graduate who likes to make things simpler.
        When he's not working, you can find him surfing the web,
        learning facts, tricks and life hack.
        He also enjoys movies in his leisure time."

添加CSS：

.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
  
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
  
  
/* Adding media queries for responsiveness.
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

例子：

  

    
    

  

  
    
Testimonials
  
    

        
        
Chris Doe, CEO at XYZ
        
"A Computer Science graduate who likes to make things simpler.
          When he's not working, you can find him surfing the web, learning facts
          , tricks and life hack."
    
  
    

        
        
John Doe, CEO at ABC Company.
        
"A Computer Science graduate who likes to make things simpler.
          When he's not working, you can find him surfing the web,
         learning facts, tricks and life hack."
    
  

  

输出：