如何做 - CSS 技能條
瞭解如何使用 CSS 建立技能條。
我的技能
“技能條”通常用於線上簡歷中，以顯示您在不同科目中的技能水平。
HTML
90%
CSS
80%
JavaScript
65%
PHP
60%
如何建立技能條
步驟 1) 新增 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>
步驟 2) 新增 CSS
示例
/* 確保內邊距（padding）的行為符合預期 */
* {box-sizing:border-box}
/* 技能條的容器 */
.container {
width: 100%; /* 寬度 100% */
background-color: #ddd; /* 灰色背景 */
}
.skills {
text-align: right; /* 右對齊文字 */
padding-top: 10px; /* 新增頂部內邊距 */
padding-bottom: 10px; /* 新增底部內邊距 */
color: white; /* 白色文字顏色 */
}
.html {width: 90%; background-color: #04AA6D;} /* 綠色 */
.css {width: 80%; background-color: #2196F3;} /* 藍色 */
.js {width: 65%; background-color: #f44336;} /* 紅色 */
.php {width: 60%; background-color: #808080;} /* 深灰色 */
自己動手試一試 »
