Wie erstellst du: Kundenbewertungen

Erfahre, wie du CSS verwendet, um responsives Kundenfeedback zu erstellen.

Kundenbewertungen werden normalerweise verwendet, um anderen zu zeigen, wie andere dich oder deine Produkte sehen.

Avatar

Chris Fox. CEO bei Mighty Schools.

John Doe hat uns vor einem Web-Katastrophe gerettet.

Avatar

Rebecca Flex. CEO bei Company.

Niemand ist besser als John Doe.

Avatar

Julia Roberts. Schauspieler.

Johnny Boy einfach lieben.

亲自试一试

Wie stelle ich das Style der Kundenbewertungen ein?

Schritt 1 - HTML hinzufügen:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO bei Mighty Schools.</p>
  <p>Bill Gates hat uns vor einem Web-Desaster gerettet.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO bei Company.</p>
  <p>Keiner ist besser als Bill Gates.</p>
</div>

Schritt 2 - CSS hinzufügen:

/* Mit abgerundeten Kanten, grauem Hintergrund und einigen Innen- und Außenabständen das Style des Containers setzen. */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Das Floating im Container nach dem Container bereinigen. */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Das Bild im Container nach links floaten. Hinzufügen von rechter Außenrand und das Bild-Style auf rund setzen. */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Erhöhung der Schriftgröße des span-Elements. */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Hinzufügen von Medienabfragen, um eine responsive Layout zu erreichen. Dies wird den Text und die Bilder im Container zentrieren. */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

亲自试一试