技能栏

---

了解如何使用 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:

实例

/* 确保填充的行为符合预期 */
* {box-sizing:border-box}

/* 技能条的容器 */
.container {
  width: 100%; /* 全宽 */
  background-color: #ddd; /* 灰色背景 */
}

.skills {
  text-align: right; /* 右对齐文本 */
  padding-top: 10px; /* 添加顶部填充 */
  padding-bottom: 10px; /* 添加底部填充 */
  color: white; /* 白色文本颜色 */
}

.html {width: 90%; background-color: #4CAF50;} /* 绿色 */
.css {width: 80%; background-color: #2196F3;} /* 蓝色 */
.js {width: 65%; background-color: #f44336;} /* 红色 */
.php {width: 60%; background-color: #808080;} /* 深灰色 */
亲自试一试 »