Rumah > Artikel > hujung hadapan web > Buat lajur penilaian kemahiran lima bintang menggunakan CSS
Buat lajur penilaian kemahiran lima bintang menggunakan CSS
- WBOYke hadapan
- 2023-08-25 14:17:141073semak imbas
Bar penilaian kemahiran 5 bintang ialah elemen penting mana-mana tapak web portfolio untuk memaparkan penilaian dan pencapaian. Bar penilaian responsif dan berfungsi pada pelbagai peranti. Di sini kami menggunakan butang radio untuk membuat bar penilaian.
Algoritma
Buat dokumen HTML yang mengandungi pengepala dan bahagian badan.
Gunakan CSS untuk menetapkan warna latar belakang dan memusatkan kandungan badan.
Elemen penilaian gaya menggunakan saiz fon, orientasi dan sifat paparan.
Sembunyikan butang radio dan gayakan elemen label untuk memaparkannya sebagai blok.
Gunakan CSS untuk menambah interaktiviti pada elemen label dengan pemilih :hover, :checked dan ~.
Buat elemen div dengan kelas rating dalam bahagian badan.
Tambah lima elemen input wayarles dengan nilai dan ID yang berbeza.
Tambahkan lima elemen label dengan kandungan teks asterisk dan atribut yang sepadan dengan ID input radio yang sepadan.
Contoh
<!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>
Daripada menggunakan butang radio, pembangun boleh menggunakan jenis input lain seperti peluncur julat, kotak semak atau input teks untuk membolehkan pengguna memberikan maklum balas yang lebih terperinci.
Untuk tapak web yang memerlukan tahap penilaian yang berbeza, pembangun boleh mengubah suai gaya CSS dan penanda HTML untuk menampung pilihan penilaian yang berbeza. JavaScript boleh digunakan untuk menambah lebih banyak fungsi interaktif pada bar penilaian, seperti memaparkan penilaian semasa atau memaparkan mesej selepas pengguna menyerahkan penilaian.
Kesimpulan
Sebagai lajur penilaian dan maklum balas, lajur tersebut boleh digunakan pada tapak web e-dagang, apl mudah alih, ulasan produk dalam talian, dsb. untuk meningkatkan pengalaman dan kepuasan pengguna. Kami menggunakan ikon dan bukannya imej, yang memudahkan gaya dan saiz semula, tidak seperti imej. Bar penilaian responsif dan berfungsi pada pelbagai peranti.
Penggayaan CSS membolehkan menyesuaikan penampilan bar penilaian agar sesuai dengan sebarang reka bentuk tapak web.
Atas ialah kandungan terperinci Buat lajur penilaian kemahiran lima bintang menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!