Maison > Article > interface Web > Créez une colonne d'évaluation des compétences cinq étoiles à l'aide de CSS
Créez une colonne d'évaluation des compétences cinq étoiles à l'aide de CSS
- WBOYavant
- 2023-08-25 14:17:141029parcourir
La barre d'évaluation des compétences 5 étoiles est un élément essentiel de tout site Web de portfolio pour afficher les notes et les réalisations. La barre de notation est réactive et fonctionne sur une variété d'appareils. Ici, nous utilisons des boutons radio pour créer une barre de notation.
Algorithme
Créez un document HTML contenant des parties d'en-tête et de corps.
Utilisez CSS pour définir la couleur d'arrière-plan et centrer le contenu du corps.
Stylez les éléments d'évaluation en utilisant la taille de la police, l'orientation et les propriétés d'affichage.
Cachez le bouton radio et stylisez l'élément label pour l'afficher sous forme de bloc.
Utilisez CSS pour ajouter de l'interactivité aux éléments d'étiquetage avec les sélecteurs :hover, :checked et ~.
Créez un élément div avec une classe de notation dans la section corps.
Ajoutez cinq éléments d'entrée sans fil avec des valeurs et des identifiants différents.
Ajoutez cinq éléments d'étiquette avec le contenu textuel de l'astérisque et les attributs qui correspondent à l'ID d'entrée radio correspondant.
Exemple
<!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>
Au lieu d'utiliser des boutons radio, les développeurs peuvent utiliser d'autres types de saisie tels que des curseurs de plage, des cases à cocher ou des saisies de texte pour permettre aux utilisateurs de fournir des commentaires plus détaillés.
Pour les sites Web nécessitant différents niveaux de notation, les développeurs peuvent modifier les styles CSS et le balisage HTML pour s'adapter aux différentes options de notation. JavaScript peut être utilisé pour ajouter des fonctionnalités plus interactives à la barre de notation, telles que l'affichage de la note actuelle ou l'affichage d'un message après que l'utilisateur a soumis une note.
Conclusion
En tant que colonnes d'évaluation et de commentaires, elles peuvent être utilisées sur les sites Web de commerce électronique, les applications mobiles, les avis sur les produits en ligne, etc. pour améliorer l'expérience et la satisfaction des utilisateurs. Nous utilisons des icônes au lieu d'images, ce qui facilite le style et le redimensionnement, contrairement aux images. La barre de notation est réactive et fonctionne sur une variété d'appareils.
Le style CSS permet de personnaliser l’apparence de la barre de notation pour l’adapter à n’importe quelle conception de site Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!