ในการสร้างดัชนีชี้วัด "การให้คะแนนผู้ใช้" ด้วย CSS โค้ดจะเป็นดังนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<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> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
