Bagaimana membuat: Beralat kemampuan CSS

Belajar bagaimana menggunakan CSS untuk membuat beralat kemampuan.

Kemampuan saya

Dalam CV online, sering kali digunakan 'beralat kemampuan' untuk menampilkan kemampuan Anda di berbagai bidang:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

亲自试一试

Bagaimana membuat beralat 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 padding bekerja seperti yang diharapkan */
* {box-sizing:border-box}
/* wadah beralat kemampuan */
.container {
  lebar: 100%; /* lebar penuh */
  warna-latar: #ddd; /* abu-abu */
}
.skills {
  text-align: kanan; /* rata kanan teks */
  padding-atas: 10px; /* menambah jarak atas internal */
  padding-bawah: 10px; /* menambah jarak bawah internal */
  warna: putih; /* teks putih */
}
.html {lebar: 90%; warna-latar: #04AA6D;} /* hijau */
.css {lebar: 80%; warna-latar: #2196F3;} /* biru */
.js {lebar: 65%; warna-latar: #f44336;} /* merah */
.php {lebar: 60%; warna-latar: #808080;} /* abu-abu yang tinggi */

亲自试一试