資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 CSS 建立 5 星技能評分條
5 星技能評分條是任何展示評分和成就的個人作品集網站中必不可少的元素。評分條具有響應式設計，可以在各種裝置上使用。在這裡，我們使用單選按鈕來建立評分條。
演算法
建立一個包含頭部和主體部分的 HTML 文件。
使用 CSS 設定主體背景顏色並居中內容。
使用字型大小、方向和顯示屬性來設定評分元素的樣式。
隱藏單選按鈕，並設定標籤元素的樣式以將其顯示為塊級元素。
使用 CSS，透過 :hover、:checked 和 ~ 選擇器為標籤元素新增互動性。
在主體部分建立一個具有 rating 類的 div 元素。
新增五個具有不同值和 id 的單選輸入元素。
新增五個標籤元素，其文字內容為星號符號，並將其 for 屬性與相應的單選輸入 id 匹配。
示例
<!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>
除了使用單選按鈕外，開發人員還可以使用其他輸入型別，如範圍滑塊、複選框或文字輸入，以允許使用者提供更詳細的反饋。
對於需要不同評分範圍的網站，開發人員可以修改 CSS 樣式和 HTML 標記以適應不同的評分選項。JavaScript 可用於為評分條新增更多互動式功能，例如顯示當前評分或在使用者提交評分後顯示訊息。
結論
作為評分和反饋條，它們可以用於電子商務網站、移動應用程式、線上產品評論等，以提升使用者體驗和滿意度。我們使用了圖示而不是影像，這使得樣式和調整大小變得容易，不像影像那樣。評分條具有響應式設計，可以在各種裝置上使用。
CSS 樣式允許自定義評分條的外觀以適應任何網站設計。
更新於：2023 年 8 月 18 日
982 次瀏覽
廣告