Bagaimana membuat: Bahu kemampuan CSS

Belajar bagaimana menggunakan CSS untuk membuat bahu kemampuan.

Kemampuan saya

Dalam surat lamar pekerjaan online, 'bahu kemampuan' sering digunakan untuk menunjukkan kemampuan Anda di berbagai bidang:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Try It Yourself

Bagaimana membuat bahu kemampuan

Langkah pertama - Tambahkan 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>

Langkah kedua - Tambahkan CSS:

/* Memastikan margin bekerja seperti yang diharapkan */
* {penyusun kasing: border-box}
/* Penampung bahu kemampuan */
.container {
  lebar: 100%; /* Lebar penuh */
  warna latar: #ddd; /* Abu-abu */
}
.skills {
  text-align: kanan; /* Jajaran teks kanan */
  margin atas: 10px; /* Tambahkan margin atas */
  margin bawah: 10px; /* Tambahkan margin bawah */
  warna: putih; /* Tekst putih */
}
.html {lebar: 90%; warna latar: #04AA6D;} /* Hijau */
.css {lebar: 80%; warna latar: #2196F3;} /* Biru */
.js {lebar: 65%; warna latar: #f44336;} /* Kuning */
.php {lebar: 60%; warna latar: #808080;} /* Kuning jauh */

Try It Yourself