Cara membuat: Ulasan pelanggan

Cara menggunaan CSS untuk membuat ulasan pelanggan responsif.

Ulasan pelanggan biasanya digunakan untuk membiarkan orang lain mengetahui pendapat mereka tentang Anda atau produk Anda.

Avatar

Chris Fox. CEO di Sekolah Berani.

John Doe menyelamatkan kami dari bencana web.

Avatar

Rebecca Flex. CEO di Perusahaan.

Tidak ada yang lebih baik daripada John Doe.

Avatar

Julia Roberts. Pemeran.

Cukup menikmati Johnny Boy.

Coba sendiri

Bagaimana mengatur gaya penilaian pelanggan

Langkah pertama - Tambahkan HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO di Sekolah Hebat.</p>
  <p>Bill Gates menyelamatkan kami dari bencana web.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO di Perusahaan.</p>
  <p>Tidak ada yang lebih baik daripada Bill Gates.</p>
</div>

Langkah kedua - Tambahkan CSS:

/* Menggunakan bingkai rounded, latar belakang abu-abu, dan beberapa marjin internal dan eksternal untuk mengatur gaya kontainer */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Membersihkan gelombang di belakang kontainer */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Menggeser gambar di dalam kontainer ke arah kiri. Menambahkan marjin eksternal kanan dan membuat gaya gambar menjadi lingkaran */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Menambahkan ukuran font span elemen */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Menambahkan penggunaan media query untuk mengatur tata letak responsif. Ini akan membuat teks dan gambar di dalam kontainer berada di tengah */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Coba sendiri