操作方法 - CSS 技能栏

了解如何使用 CSS 创建技能栏。

我的技能

在线简历中经常使用 "skill bar" 来展示您在不同主题上的技能：

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：

示例

/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}

.skills {
text-align: right; /* Right-align text */
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
color: white; /* White text color */
}

.html {width: 90%; background-color: #04AA6D;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.html {width: 60%; background-color: #808080;} /* Dark Grey */

亲自试一试 »