Kashi da kirkirar: Gudanar da kiyayyu na mutum

Kware da hakan da za a fiwa CSS domin kirkirar gudanar da kiyayyu na mutum.

Gudanar da kiyayyu na mutum na yana cikin hanci kan mutum ko ko wato ko wato ka wato.

Avatar

Chris Fox. CEO a makarantun kaijuwa.

John Doe ya yiwa daga kasa dake da web.

Avatar

Rebecca Flex. CEO a fima.

Kane na yau da bai John Doe.

Avatar

Julia Roberts. Actor.

Simply love Johnny Boy.

亲自试一试

如何设置客户评价的样式

第一步 - 添加 HTML：

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
  <p>Bill Gates saved us from a web disaster.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO at Company.</p>
  <p>No one is better than 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;
  }
}

亲自试一试