Πώς να δημιουργήσετε: Αξιολογήσεις πελατών

Επινοήστε πώς να χρησιμοποιήσετε το CSS για να δημιουργήσετε μια ανταποκρινόμενη αξιολόγηση πελατών.

Οι αξιολογήσεις πελατών χρησιμοποιούνται συνήθως για να κάνουν τους άλλους να γνωρίζουν τις απόψεις τους για εσάς ή τα προϊόντα σας.

Αβαταρ

Chris Fox. Διευθυντής Εταιρείας στο Μέγιστα Σχολεία.

Ο John Doe μας σώθηκε από μια καταστροφή στο διαδίκτυο.

Αβαταρ

Rebecca Flex. Διευθυντής Εταιρείας.

Κανένας δεν είναι καλύτερος από τον John Doe.

Αβαταρ

Julia Roberts. Αctors.

Απλά αγαπάω τον Johnny Boy.

Προσπάθησε να το δοκιμάσεις

Πώς να ρυθμίσετε το στυλ των σχολίων πελατών

Πρώτη Βήμα - Προσθήκη HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO στην Πανεπιστημιακή Σχολή.</p>
  <p>Ο Bill Gates μας σώζοντας από μια καταστροφή του διαδικτύου.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO στην Εταιρεία.</p>
  <p>Κανείς δεν είναι καλύτερος από τον 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;
  }
}

Προσπάθησε να το δοκιμάσεις