ວິທີການສ້າງ: 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 {ວັດຖຸ: 90%; ສີກຳລັງ: #04AA6D;} /* ສີຫຼັງ */
.css {ວັດຖຸ: 80%; ສີກຳລັງ: #2196F3;} /* ສີຫຼັງ */
.js {ວັດຖຸ: 65%; ສີກຳລັງ: #f44336;} /* ສີສີໂຈມ */
.php {ວັດຖຸ: 60%; ສີກຳລັງ: #808080;} /* ສີຫຼັງ */

亲自试一试