Cách tạo: Thanh kỹ năng CSS

Học cách sử dụng CSS để tạo thanh kỹ năng.

Kỹ năng của tôi

Thường xuyên sử dụng “thanh kỹ năng” trong hồ sơ trực tuyến để trình bày kỹ năng của bạn trong các lĩnh vực khác nhau:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Thử ngay

Cách tạo thanh kỹ năng

Bước 1 - Thêm 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>

Bước 2 - Thêm CSS:

/* Đảm bảo rằng khoảng cách nội bộ hoạt động như mong đợi */
* {box-sizing:border-box}
/* Khu vực chứa thanh kỹ năng */
.container {
  width: 100%; /* Cân bằng toàn bộ rộng */
  background-color: #ddd; /* Màu xám */
}
.skills {
  text-align: right; /* Định dạng văn bản phải */
  padding-top: 10px; /* Thêm khoảng cách trên nội bộ */
  padding-bottom: 10px; /* Thêm khoảng cách dưới nội bộ */
  color: white; /* Màu chữ trắng */
}
.html {width: 90%; background-color: #04AA6D;} /* Xanh lá */
.css {width: 80%; background-color: #2196F3;} /* Xanh lam */
.js {width: 65%; background-color: #f44336;} /* Đỏ */
.php {width: 60%; background-color: #808080;} /* Đen xám */

Thử ngay