Nasıl oluşturulur: Müşteri yorumları

CSS ile dinamik müşteri yorumları nasıl oluşturulur?

Müşteri yorumları, diğer insanların sen veya ürünün hakkında ne düşündüklerini bilmelerini sağlamak için genellikle kullanılır.

Avatar

Chris Fox. Mighty Schools'un CEO'su.

John Doe bizi bir web felaketinden kurtardı.

Avatar

Rebecca Flex. Şirket'in CEO'su.

John Doe'den daha iyi kimse yok.

Avatar

Julia Roberts. Oyuncu.

Johnny Boy'a sadece aşık olun.

Kişisel olarak deneyin

Müşteri değerlendirmelerinin tarzını nasıl ayarlayacağınız

第一步 - 添加 HTML：

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> Mighty Schools'un CEO'su.</p>
  <p>Bill Gates bizi bir web felaketinden kurtardı.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> Şirketin CEO'su.</p>
  <p>Hiç kimse Bill Gates'tan daha iyi değildir.</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;
  }
}

Kişisel olarak deneyin