Sådan oprettes: CSS-færdighedsstreger

Lær at bruge CSS til at oprette færdighedsstreger.

Mine færdigheder

Online CV bruger ofte "færdighedsstreger" til at vise dine færdigheder inden for forskellige områder:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Prøv det selv

Sådan oprettes færdighedsstreger

Første trin - Tilføj 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>

Andet trin - Tilføj CSS:

/* Sørg for, at indrykning fungerer som forventet */
* {box-sizing:border-box}
/* Beholderen for færdighedsstreger */
.container {
  bredde: 100%; /* Fuld bredde */
  baggrundsfarve: #ddd; /* Grå baggrund */
}
.skills {
  tekstjustering: højre; /* Højrejusteret tekst */
  øvre_indrykning: 10px; /* Tilføj øvre indrykning */
  nedre_indrykning: 10px; /* Tilføj nederste indrykning */
  farve: hvid; /* Hvid tekstfarve */
}
.html {bredde: 90%; baggrundsfarve: #04AA6D;} /* Grøn */
.css {bredde: 80%; baggrundsfarve: #2196F3;} /* Blå */
.js {bredde: 65%; baggrundsfarve: #f44336;} /* Rød */
.php {bredde: 60%; baggrundsfarve: #808080;} /* Mørkegrå */

Prøv det selv