如何创建 - 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:
实例
/* 确保填充的行为符合预期 */
* {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;}
/* 深灰色 */
亲自试一试 »
