Nasıl oluşturulur: CSS Beceri Çubuğu

CSS ile beceri çubuğu nasıl oluşturulur öğrenin.

Becerilerim

Online özgeçmişinizde farklı alanlardaki becerilerinizi göstermek için sıkça kullanılan 'beceri çubuğu':

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Kişisel olarak deneyin

Beceri çubuğu nasıl oluşturulur

İlk Adım - HTML Ekle:

<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>

İkinci Adım - CSS Ekle:

/* İç çerçeve genişlikleri beklediğiniz gibi çalışır */
* {çerçeve_hesaplama: çerçeve-box}
/* Beceri çubuğu konteyneri */
.container {
  genişlik: 100%; /* Tam genişlik */
  arka_plan_rengi: #ddd; /* Gri arka plan */
}
.skills {
  metin_hizalama: sağ; /* Metin sağa hiza */
  üst_çerçeve_yüksekliği: 10px; /* Üst iç çerçeve eklenir */
  alt_çerçeve_yüksekliği: 10px; /* Alt iç çerçeve eklenir */
  renk: beyaz; /* Beyaz metin rengi */
}
.html {genişlik: 90%; arka_plan_rengi: #04AA6D;} /* Yeşil */
.css {genişlik: 80%; arka_plan_rengi: #2196F3;} /* Mavi */
.js {genişlik: 65%; arka_plan_rengi: #f44336;} /* Kırmızı */
.php {genişlik: 60%; arka_plan_rengi: #808080;} /* Koyu gri */

Kişisel olarak deneyin