如何创建：CSS 技能条

学习如何使用 CSS 创建技能条。

我的技能

在线简历中经常使用“技能条”来展示您在不同领域中的技能：

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

亲自试一试

如何创建技能条

第一步 - 添加 HTML：

HTML



  
90%




CSS



  
80%




JavaScript



  
65%




PHP



  
60%

第二步 - 添加 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;} /* 深灰色 */

亲自试一试