Cách tạo: Đánh giá khách hàng

Hiểu cách sử dụng CSS để tạo đánh giá khách hàng tương ứng.

Đánh giá của khách hàng thường được sử dụng để让人们 biết quan điểm của người khác về bạn hoặc sản phẩm của bạn.

Avatar

Chris Fox. CEO tại trường học vĩ đại.

John Doe đã cứu chúng ta khỏi một tai nạn trên mạng.

Avatar

Rebecca Flex. CEO tại Công ty.

Không ai giỏi hơn John Doe.

Avatar

Julia Roberts. Diễn viên.

Chỉ đơn giản yêu thích Johnny Boy.

Thử ngay

Cách thiết lập樣式 cho đánh giá khách hàng

Bước 1 - Thêm HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO tại Trường học Vĩ đại.</p>
  <p>Bill Gates đã cứu chúng ta khỏi một tai nạn web.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO tại Công ty.</p>
  <p>Không ai giỏi hơn Bill Gates.</p>
</div>

Bước 2 - Thêm CSS:

/* Sử dụng cạnh bo tròn, nền xám và một số cạnh trong và ngoài để thiết lập樣式 khay. */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Xóa nổi sau khay. */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Đưa hình ảnh trong khay về bên trái. Thêm cạnh ngoài phải và thiết lập樣式 hình ảnh là tròn. */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Tăng kích thước font cho phần tử span. */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Thêm điều kiện tìm kiếm truyền thông để thực hiện bố cục tương ứng. Điều này sẽ làm cho văn bản và hình ảnh nằm giữa trong khay. */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Thử ngay