Как сделать - Панель навыков
Узнать, как создать панель навыков с помощью 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;} /* Темно-серый */
Редактор кода »