만드는 방법: 고객 평가

CSS를 사용하여 반응형 고객 평가를 만드는 방법을 알아보세요.

고객 평가는 다른 사람들이 당신이나 당신의 제품에 대해 어떤 생각을 가지고 있는지 알려주기 위해 일반적으로 사용됩니다.

아바타

Chris Fox. Mighty Schools의 CEO.

John Doe는 우리를 웹 재앙에서 구해냈습니다.

아바타

Rebecca Flex. 회사의 CEO.

제게 더 나은 사람은 없습니다.

아바타

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;
  {}
{}

직접 시도해보세요