Bagaimana untuk membuat: Pengulasan pelanggan

Pelajari bagaimana untuk menggunakan CSS untuk membuat pengulasan pelanggan responsif.

Pengulasan pelanggan biasanya digunakan untuk memaklumkan orang lain tentang pendapat mereka tentang anda atau produk anda.

Avatar

Chris Fox. CEO di Sekolah-Sekolah Berani.

John Doe menyelamatkan kami daripada bencana web.

Avatar

Rebecca Flex. CEO di Syarikat.

Tiada seorang yang lebih baik daripada John Doe.

Avatar

Julia Roberts. Pelakon.

Sederhana saja, cinta Johnny Boy.

Coba sendiri

Bagaimana untuk menetapkan gaya penilaian pelanggan

第一步 - 添加 HTML：

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO di Sekolah-Sekolah Berani.</p>
  <p>Bill Gates menyelamatkan kami daripada bencana web.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO di Syarikat.</p>
  <p>Bukan seorangpun yang lebih baik daripada 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;
  }
}

Coba sendiri