ในการสร้าง Skill Bar ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } h1 { text-align: center; } .container { width: 100%; background-color: rgb(231, 231, 231); border-radius: 20px; } .cpp, .java, .python, .c { text-align: center; font-weight: bolder; padding-top: 3px; padding-bottom: 3px; color: white; border-radius: 20px; } .cpp { width: 90%; background-color: #4caf50; } .java { width: 80%; background-color: #2196f3; } .python { width: 65%; background-color: #f44336; } .c { width: 60%; background-color: #808080; } </style> </head> <body> <h1>Programming Proficiency</h1> <h3>Python</h3> <div class="container"> <div class="python">75%</div> </div> <h3>Java</h3> <div class="container"> <div class="java">70%</div> </div> <h3>C++</h3> <div class="container"> <div class="cpp">60%</div> </div> <h3>C</h3> <div class="container"> <div class="c">40%</div> </div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
