ਕਿਵੇਂ ਬਣਾਓ: CSS ਸਕਿੱਲ ਟ੍ਰੇਕ

CSS ਨਾਲ ਸਕਿੱਲ ਟ੍ਰੇਕ ਕਿਵੇਂ ਬਣਾਓ ਸਿੱਖੋ

ਸਕਿੱਲ ਟ੍ਰੇਕ ਕਿਵੇਂ ਬਣਾਓ

ਪਹਿਲਾ ਪਗਲਾ - ਜੋੜੋ 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>

ਦੂਜਾ ਪਗਲਾ - ਜੋੜੋ CSS:

/* ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਅੰਦਰੂਨੀ ਬੈਡਿੰਗ ਉਮੀਦ ਤਹਿਤ ਕੰਮ ਕਰੇ */
* { ਬਾਕਸ-ਇੰਸਾਈਟਿੰਗ: ਬੋਰਡਰ-ਸਿਜ਼ਿੰਗ; }
/* ਸਕਿੱਲ ਟ੍ਰੇਕ ਦੇ ਕੰਟੇਨਰ */
.container {
  ਚੌਡਾਈ: 100%; /* ਪੂਰੀ ਚੌਡਾਈ */
  ਪ੍ਰਕਾਸ਼ ਰੰਗ: #ddd; /* ਗੂੜ੍ਹੇ ਹਰੇਕਟਰ ਪੱਟੀ */
}
.skills {
  ਟੈਕਸਟ-ਅਲਾਇਨ: ਰਾਇਟ; /* ਲਿਖਤ ਦਾ ਰਾਇਟ ਜਮਾਨਾ */
  ਪਾਦਿੰਗ-ਟੋਪ: 10px; /* ਉੱਪਰਲਾ ਅੰਦਰੂਨੀ ਬੈਡਿੰਗ ਜੋੜੋ */
  ਪਾਦਿੰਗ-ਬੋਟਮ: 10px; /* ਹੇਠਲਾ ਅੰਦਰੂਨੀ ਬੈਡਿੰਗ ਜੋੜੋ */
  ਰੰਗ: ਸਫੇਦ; /* ਸਫੇਦ ਲਿਖਤ ਰੰਗ */
}
.html { ਚੌਡਾਈ: 90%; ਪ੍ਰਕਾਸ਼ ਰੰਗ: #04AA6D; } /* ਹਰਾ */
.css { ਚੌਡਾਈ: 80%; ਪ੍ਰਕਾਸ਼ ਰੰਗ: #2196F3; } /* ਨੀਲਾ */
.js { ਚੌਡਾਈ: 65%; ਪ੍ਰਕਾਸ਼ ਰੰਗ: #f44336; } /* ਲਾਲਾ */
.php { ਚੌਡਾਈ: 60%; ਪ੍ਰਕਾਸ਼ ਰੰਗ: #808080; } /* ਗੂੜ੍ਹੇ ਹਰੇਕਟਰ */

亲自试一试