Πώς να δημιουργήσετε: Γραμμή δεξιοτήτων 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:

/* Εξασφαλίζεται ότι η εσωτερική περιθώρια λειτουργεί όπως αναμένεται */
* {πακέτο κουτιού: border-box}
/* Κουτί της γραμμής δεξιοτήτων */
.container {
  πλάτος: 100%; /* Πλήρες πλάτος */
  χρώμα: #ddd; /* Χαμηλό χρώμα φόντου */
}
.skills {
  αριστερός στοίχος κείμενο: δεξί; /* Αριστερός στοίχος κείμενο */
  επάνω εσωτερική περιθώρια: 10px; /* Προσθήκη επάνω εσωτερικής περιθωρίας */
  κατώτερη εσωτερική περιθώρια: 10px; /* Προσθήκη κατώτερης εσωτερικής περιθωρίας */
  χρώμα: λευκό; /* Λευκό κείμενο */
}
.html {πλάτος: 90%; χρώμα: #04AA6D;} /* Κίτρινη */
.css {πλάτος: 80%; χρώμα: #2196F3;} /* Μπλε */
.js {πλάτος: 65%; χρώμα: #f44336;} /* Κόκκινη */
.php {πλάτος: 60%; χρώμα: #808080;} /* Κάστανη */

Προσπαθήστε να το δοκιμάσετε προσωπικά