Jak tworzyć: Paski umiejętności CSS

Naucz się, jak używać CSS do tworzenia pasków umiejętności.

Moje umiejętności

W online CV często używa się "pasków umiejętności", aby pokazać swoje umiejętności w różnych dziedzinach:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Spróbuj sam

Jak utworzyć paski umiejętności

Krok 1 - Dodaj 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>

Krok 2 - Dodaj CSS:

/* Upewnij się, że wewnętrzne marginesy działają jak oczekiwane */
* {box-sizing:border-box}
/* Kontener dla pasków umiejętności */
.container {
  szerokość: 100%; /* Pełna szerokość */
  kolor_tła: #ddd; /* Szary tło */
}
.skills {
  wyjustowanie_tekstu: prawo; /* Wyrównanie tekstu do prawej */
  górna_odstęp: 10px; /* Dodaj górny wewnętrzny margines */
  dolna_odstęp: 10px; /* Dodaj dolny wewnętrzny margines */
  kolor: biały; /* Kolor tekstu biały */
}
.html {szerokość: 90%; kolor_tła: #04AA6D;} /* zielony */
.css {szerokość: 80%; kolor_tła: #2196F3;} /* niebieski */
.js {szerokość: 65%; kolor_tła: #f44336;} /* czerwony */
.php {szerokość: 60%; kolor_tła: #808080;} /* ciemnoszary */

Spróbuj sam