ในการสร้าง "User Rating" Scorecard ด้วย 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>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
