कैसे करें - सीएसएस स्किल बार
CSS के साथ स्किल बार बनाने का तरीका जानें।
मेरे कौशल
विभिन्न विषयों में आपके कौशल को प्रदर्शित करने के लिए अक्सर ऑनलाइन सीवी/रिज्यूमे में एक "कौशल बार" का उपयोग किया जाता है:
एचटीएमएल
90%
सीएसएस
80%
जावास्क्रिप्ट
65%
पीएचपी
60%
स्किल बार कैसे बनाएं
चरण 1) HTML जोड़ें
उदाहरण
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div
class="skills js">65%</div>
</div>
<p>PHP</p>
<div
class="container">
<div class="skills php">60%</div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Make sure that padding behaves as expected */
* {box-sizing:border-box}
/* Container for skill bars */
.container {
width: 100%;
/* Full width */
background-color: #ddd; /* Grey background */
}
.skills {
text-align: right;
/* Right-align text */
padding-top: 10px; /* Add top padding */
padding-bottom:
10px; /* Add bottom padding */
color: white; /* White text
color */
}
.html
{width: 90%; background-color: #04AA6D;} /* Green */
.css
{width: 80%; background-color: #2196F3;} /* Blue */
.js
{width: 65%; background-color: #f44336;} /* Red */
.php
{width: 60%; background-color: #808080;} /* Dark Grey */