Paano gumawa: Pag-apila ng customer

Alamin kung paano gumawa ng responsive customer review gamit ang CSS.

Ang pag-apila ng customer ay karaniwang ginagamit upang ipaalam sa mga tao kung ano ang pananaw nila sa iyo o sa iyong produkto.

Avatar

Chris Fox. CEO sa Mighty Schools.

Iniligtas ni John Doe tayo mula sa web disaster.

Avatar

Rebecca Flex. CEO sa Company.

Wala kahit sino ang mas mahusay kay John Doe.

Avatar

Julia Roberts. Actor.

Simply love Johnny Boy.

亲自试一试

如何设置客户评价的样式

第一步 - 添加 HTML：

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
  <p>Bill Gates saved us from a web disaster.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO at Company.</p>
  <p>No one is better than Bill Gates.</p>
</div>

第二步 - 添加 CSS：

/* 使用圆角边框、灰色背景和一些内边距和外边距来设置容器的样式 */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* 在容器后清除浮动 */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* 将容器内的图像向左浮动。添加右外边距，并将图像样式设置为圆形 */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* 增加 span 元素的字体大小 */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* 添加媒体查询以实现响应式布局。这将使文本和图片在容器内居中 */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

亲自试一试