Hur man skapar: CSS-färdighetslistor

Lär dig hur man använder CSS för att skapa färdighetslistor.

Mina färdigheter

Online CV använder ofta "färdighetslistor" för att visa dina färdigheter inom olika områden:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

亲自试一试

Hur man skapar färdighetslistor

Steg 1 - Lägg till 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>

Steg 2 - Lägg till CSS:

/* Se till att sidopadding fungerar som förväntat */
* { box-sizing:border-box }
/* Behållare för färdighetslistor */
.container {
  bredd: 100%; /* Full bredd */
  bakgrundsfärg: #ddd; /* Grå bakgrund */
}
.skills {
  text-align: höger; /* Text högerjusterad */
  övre sidopadding: 10px; /* Lägg till övre sidopadding */
  nedre sidopadding: 10px; /* Lägg till nedre sidopadding */
  färg: vit; /* Vit textfärg */
}
.html { bredd: 90%; bakgrundsfärg: #04AA6D; } /* Grön */
.css { bredd: 80%; bakgrundsfärg: #2196F3; } /* Blå */
.js { bredd: 65%; bakgrundsfärg: #f44336; } /* Röd */
.php { bredd: 60%; bakgrundsfärg: #808080; } /* Mörkgrå */

亲自试一试