Wie man erstellt: CSS Fähigkeitsleiste

Lernen Sie, wie man Fähigkeitsleisten mit CSS erstellt.

Meine Fähigkeiten

Online-Lebensläufe verwenden oft "Fähigkeitsleisten", um Ihre Fähigkeiten in verschiedenen Bereichen zu zeigen:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Try it yourself

Wie man Fähigkeitsleisten erstellt

Schritt 1 - HTML hinzufügen:

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

Schritt 2 - CSS hinzufügen:

/* Stellt sicher, dass der Innenabstand wie erwartet funktioniert */
* {box-sizing:border-box}
/* Behälter für die Fähigkeitsleiste */
.container {
  Breite: 100%; /* Volle Breite */
  Hintergrundfarbe: #ddd; /* Grauer Hintergrund */
}
.skills {
  text-align: right; /* Text nach rechts ausrichten */
  padding-top: 10px; /* Oberer Innenabstand hinzufügen */
  padding-bottom: 10px; /* Untere Innenabstand hinzufügen */
  color: white; /* Weisse Textfarbe */
}
.html {Breite: 90%; Hintergrundfarbe: #04AA6D;} /* Grün */
.css {Breite: 80%; Hintergrundfarbe: #2196F3;} /* Blau */
.js {Breite: 65%; Hintergrundfarbe: #f44336;} /* Rot */
.php {Breite: 60%; Hintergrundfarbe: #808080;} /* Dunkelgrau */

Try it yourself