Hur skapar man: Kundrecensioner

Lär dig hur du använder CSS för att skapa responsiva kundrecensioner.

Kundrecensioner används vanligtvis för att låta andra människor veta vad de tycker om dig eller ditt produkt.

Avatar

Chris Fox. CEO på Stora Skolor.

John Doe räddade oss från en webb katastrof.

Avatar

Rebecca Flex. CEO på Företag.

Ingen är bättre än John Doe.

Avatar

Julia Roberts. Skådespelare.

Bara älska Johnny Boy.

Prova själv

Hur man ställer in stilen för kundrecensioner

Steg 1 - Lägg till HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO på Stora Skolor.</p>
  <p>Bill Gates räddade oss från en webb katastrof.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO på Företag.</p>
  <p>Ingen är bättre än 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;
  }
}

Prova själv