Heim > Artikel > Web-Frontend > Erstellen Sie mit CSS eine Fünf-Sterne-Fähigkeitsbewertungsspalte

Erstellen Sie mit CSS eine Fünf-Sterne-Fähigkeitsbewertungsspalte

WBOYnach vorne: 2023-08-25 14:17:141033Durchsuche

Die 5-Sterne-Fertigkeitsbewertungsleiste ist ein wesentliches Element jeder Portfolio-Website zur Anzeige von Bewertungen und Erfolgen. Die Bewertungsleiste reagiert und funktioniert auf einer Vielzahl von Geräten. Hier verwenden wir Optionsfelder, um eine Bewertungsleiste zu erstellen.

Algorithmus

Erstellen Sie ein HTML-Dokument mit Kopf- und Textteilen.
Verwenden Sie CSS, um die Hintergrundfarbe festzulegen und den Textinhalt zu zentrieren.
Stilbewertung von Elementen anhand von Schriftgröße, Ausrichtung und Anzeigeeigenschaften.
Verstecken Sie das Optionsfeld und gestalten Sie das Beschriftungselement so, dass es als Block angezeigt wird.
Verwenden Sie CSS, um Interaktivität zum Beschriften von Elementen mit den Selektoren :hover, :checked und ~ hinzuzufügen.
Erstellen Sie im Hauptteil ein div-Element mit einer Bewertungsklasse.
Fügen Sie fünf drahtlose Eingabeelemente mit unterschiedlichen Werten und IDs hinzu.
Fügen Sie fünf Beschriftungselemente mit dem Textinhalt des Sternchens und Attributen hinzu, die mit der entsprechenden Funkeingangs-ID übereinstimmen.

Beispiel

<!DOCTYPE html>
<html>
<head>
  <title>5-Star Skills Rating Bar</title>
  <!-- The following CSS styles the rating bar and allows for customization -->
  <style>
    /* The body is styled to center the rating bar and give it a background color */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #a2f9ff;
    }
    /* The rating class is used to style the rating bar and make it responsive */
.rating {
  font-size: 0; /* Remove any font size */
  direction: rtl; /* Set direction to right-to-left for proper star display */
}

/* Hide the radio input element of the rating bar */
.rating input {
  display: none;
}

/* Style the label elements to display as stars and to allow for interactivity */
.rating label {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  font-size: 24px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  color: #ccc;
  transform: rotateY(180deg); /* Flip the star to display properly */
}

/* Style the label elements when hovered over or checked */
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
  color: #f90; /* Change the color of the star to yellow when hovered over or checked */
}
</style>
</head>
<body>
  <!-- The rating class is used to create the rating bar using radio input elements and labels -->
  <div class="rating">
    <input type="radio" name="rating" id="rating-1" value="1" />
    <label for="rating-1">★</label>
    <input type="radio" name="rating" id="rating-2" value="2" />
    <label for="rating-2">★</label>
    <input type="radio" name="rating" id="rating-3" value="3" />
    <label for="rating-3">★</label>
    <input type="radio" name="rating" id="rating-4" value="4" />
    <label for="rating-4">★</label>
    <input type="radio" name="rating" id="rating-5" value="5" />
    <label for="rating-5">★</label>
  </div>
</body>
</html>

Anstatt Optionsfelder zu verwenden, können Entwickler andere Eingabetypen wie Bereichsschieberegler, Kontrollkästchen oder Texteingaben verwenden, um Benutzern die Möglichkeit zu geben, detaillierteres Feedback zu geben.

Für Websites, die unterschiedliche Bewertungsstufen erfordern, können Entwickler CSS-Stile und HTML-Markup ändern, um den unterschiedlichen Bewertungsoptionen Rechnung zu tragen. Mithilfe von JavaScript können der Bewertungsleiste weitere interaktive Funktionen hinzugefügt werden, z. B. die Anzeige der aktuellen Bewertung oder die Anzeige einer Nachricht, nachdem der Benutzer eine Bewertung abgegeben hat.

Fazit

Als Bewertungs- und Feedbackspalten können sie auf E-Commerce-Websites, mobilen Apps, Online-Produktbewertungen usw. verwendet werden, um die Benutzererfahrung und -zufriedenheit zu verbessern. Wir verwenden Symbole anstelle von Bildern, was im Gegensatz zu Bildern das Stylen und Ändern der Größe erleichtert. Die Bewertungsleiste reagiert und funktioniert auf einer Vielzahl von Geräten.

CSS-Styling ermöglicht die Anpassung des Erscheinungsbilds der Bewertungsleiste an jedes Website-Design.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS eine Fünf-Sterne-Fähigkeitsbewertungsspalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 选择器算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Warum wird in SCSS „_“ vor dem Dateinamen hinzugefügt?Nächster Artikel：Warum wird in SCSS „_“ vor dem Dateinamen hinzugefügt?

In Verbindung stehende Artikel

Mehr sehen