چگونه ایجاد شود: خطوط مهارت CSS

آموزش نحوه استفاده از CSS برای ایجاد خطوط مهارت.

مهارت‌های من

در رزومه آنلاین معمولاً از "خطوط مهارت" برای نمایش مهارت‌های خود در زمینه‌های مختلف استفاده می‌شود:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

亲自试一试

چگونه خطوط مهارت ایجاد کنیم

مرحله اول - افزودن 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>

مرحله دوم - افزودن 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;} /* سوره سياه */

亲自试一试