Как создать: Строка навыков 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: #04AA6D;} /* Зеленый цвет */
.css {width: 80%; background-color: #2196F3;} /* Синий цвет */
.js {width: 65%; background-color: #f44336;} /* Красный цвет */
.php {width: 60%; background-color: #808080;} /* Серый цвет */

Попробуйте сами