資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何使用 CSS 建立“使用者評分”記分卡？
要建立使用者評分記分卡，首先設定星形的精確圖示。這將使用 Font Awesome 圖示完成。各個評分顯示為進度條。
設定星級評分的圖示
星級評分的圖示使用 Font Awesome 圖示設定。我們在開頭添加了 Font Awesome 圖示的以下 CDN 路徑，以便在我們的網頁上使用它：
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
對於已評分，使用 fa fa-star rated：
<span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span>
上面已評分的類被設計成使星星看起來更吸引人：
.rated {
color: rgb(255, 0, 0);
border: 2px solid yellow;
}
對於未評分，僅使用 fa fa-star：
<span class="fa fa-star"></span>
星級評分標題
星級評分標題如下：
<span class="rateHeader">User Rating</span>
它的樣式如下：
.rateHeader {
font-size: 25px;
margin-right: 25px;
}
設定進度條的 div
為 1 星、2 星、3 星、4 星和 5 星評級建立不同的進度條：
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
設定進度條的樣式
進度條放置在左側，使用 float 屬性和 left 值：
.progressBar {
margin-top: 10px;
float: left;
width: 70%;
}
設定進度條容器的樣式
進度條中的容器 div 的樣式如下：
.progressContainer {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 10px;
}
設定各個條形的樣式
各個條形也使用 width、height 和 background-color 屬性設定樣式：
.bar-5 {
width: 70%;
height: 18px;
background-color: rgb(76, 175, 162);
}
.bar-4 {
width: 50%;
height: 18px;
background-color: rgb(243, 222, 33);
}
.bar-3 {
width: 20%;
height: 18px;
background-color: #12d400;
}
.bar-2 {
width: 65%;
height: 18px;
background-color: #ff0055;
}
.bar-1 {
width: 40%;
height: 18px;
background-color: #a836f4;
}
示例
要使用 CSS 建立“使用者評分”記分卡，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 30px;
max-width: 800px;
padding: 20px;
}
.rateHeader {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
color: grey;
}
.rated {
color: rgb(255, 0, 0);
border: 2px solid yellow;
}
.data {
float: left;
width: 15%;
margin-top: 10px;
font-weight: bold;
}
.progressBar {
margin-top: 10px;
float: left;
width: 70%;
}
.right {
text-align: right;
}
.row:after {
content: "";
display: table;
clear: both;
}
.progressContainer {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 10px;
}
.bar-1, .bar-2, .bar-3, .bar-4, .bar-5 {
border-radius: 10px;
}
.bar-5 {
width: 70%;
height: 18px;
background-color: rgb(76, 175, 162);
}
.bar-4 {
width: 50%;
height: 18px;
background-color: rgb(243, 222, 33);
}
.bar-3 {
width: 20%;
height: 18px;
background-color: #12d400;
}
.bar-2 {
width: 65%;
height: 18px;
background-color: #ff0055;
}
.bar-1 {
width: 40%;
height: 18px;
background-color: #a836f4;
}
</style>
</head>
<body>
<span class="rateHeader">User Rating</span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<p>3.9 average based on 200 foodies.</p>
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
</body>
</html>
更新於: 2023 年 11 月 17 日
646 次檢視
廣告