स्किल बार कंटेनर और भरे हुए भाग से बनते हैं। कंटेनर ग्रे बैकग्राउंड, गोल कोने; भरा भाग रंगीन, चौड़ाई प्रतिशत दर्शाती है। लेबल और प्रतिशत टेक्स्ट शामिल।
उदाहरण
<!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>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- कंटेनर + फिल - दो नेस्टेड डिव
- चौड़ाई = प्रतिशत - इंलाइन स्टाइल या क्लास से
- बॉर्डर-रेडियस - दोनों पर समान (20px) पिल शेप
- रंग कोडिंग - हरा (C++), नीला (Java), लाल (Python), ग्रे (C)
- टेक्स्ट सेंटर - प्रतिशत लेबल केंद्रित
