如何創建：CSS 技能條

學習如何使用 CSS 創建技能條。

我的技能

在線簡歷中經常使用“技能條”來展示您在不同領域中的技能：

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

親自試一試

如何創建技能條

第一步 - 添加 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>

第二步 - 添加 CSS：

/* 確保內邊距如預期那樣工作 */
* {box-sizing:border-box}
/* 技能條的容器 */
.container {
  width: 100%; /* 全寬 */
  background-color: #ddd; /* 灰色背景 */
}
.skills {
  text-align: right; /* 文本右對齊 */
  padding-top: 10px; /* 添加上內邊距 */
  padding-bottom: 10px; /* 添加下內邊距 */
  color: white; /* White text color */
}
.html {width: 90%; background-color: #04AA6D;} /* 綠色 */
.css {width: 80%; background-color: #2196F3;} /* 藍色 */
.js {width: 65%; background-color: #f44336;} /* 紅色 */
.php {width: 60%; background-color: #808080;} /* 深灰色 */

親自試一試