ວິທີສ້າງ Footer ງາມໆ ດ້ວຍ HTML ແລະ CSS

ບົດນຳ

ໃນການອອກແບບເວັບໄຊ, ຫຼາຍຄົນມັກຈະໃຫ້ຄວາມສຳຄັນກັບສ່ວນເທິງສຸດ ຫຼື ເນື້ອຫາຫຼັກ ແຕ່ມັກຈະມອງຂ້າມສ່ວນລຸ່ມສຸດທີ່ເອີ້ນວ່າ "Footer". ແຕ່ຮູ້ບໍ່ວ່າ Footer ແມ່ນຈຸດສຳຄັນທີ່ລວບລວມລິ້ງທີ່ຈຳເປັນ, ຂໍ້ມູນຕິດຕໍ່ ແລະ ລິຂະສິດຕ່າງໆ ເຊິ່ງຊ່ວຍໃຫ້ຜູ້ໃຊ້ງານສາມາດຊອກຫາຂໍ້ມູນໄດ້ງ່າຍຂຶ້ນເມື່ອເລື່ອນມາຈົນສຸດໜ້າຈໍ. ໃນບົດຄວາມນີ້, ເຮົາຈະມາຮຽນຮູ້ວິທີສ້າງ Footer ແບບມືອາຊີບ ທີ່ມີການແບ່ງຖັນ (Columns) ຢ່າງສວຍງາມ ດ້ວຍການໃຊ້ພຽງແຕ່ HTML ແລະ CSS ພື້ນຖານກັນ.

1. ວາງໂຄງສ້າງພື້ນຖານດ້ວຍ HTML

ກ່ອນອື່ນໝົດ, ເຮົາຕ້ອງມາກຳນົດໂຄງສ້າງຂອງ Footer ກັນກ່ອນ. ເຮົາຈະໃຊ້ແທັກ <footer> ເຊິ່ງເປັນແທັກມາດຕະຖານສຳລັບສ່ວນທ້າຍຂອງເວັບໄຊ, ແລະ ແບ່ງເນື້ອຫາພາຍໃນອອກເປັນ 3 ສ່ວນຫຼັກຄື: ຂໍ້ມູນກ່ຽວກັບເວັບໄຊ, ລິ້ງດ່ວນ ແລະ ຊ່ອງທາງຕິດຕໍ່.

<footer class="site-footer">
  <div class="footer-container">
    <div class="footer-column">
      <h3>ກ່ຽວກັບພວກເຮົາ</h3>
      <p>ເວັບໄຊນີ້ສ້າງຂຶ້ນເພື່ອແບ່ງປັນຄວາມຮູ້ເລື່ອງການອອກແບບ ແລະ ພັດທະນາເວັບໄຊສຳລັບຄົນລາວ.</p>
    </div>
    <div class="footer-column">
      <h3>ລິ້ງດ່ວນ</h3>
      <ul>
        <li><a href="#">ໜ້າຫຼັກ</a></li>
        <li><a href="#">ບົດຄວາມ</a></li>
        <li><a href="#">ຕິດຕໍ່ພວກເຮົາ</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3>ຕິດຕໍ່</h3>
      <p>ອີເມວ: info@example.com</p>
      <p>ໂທລະສັບ: +856 20 1234 5678</p>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; 2026 ສົງວນລິຂະສິດ. ສ້າງດ້ວຍຄວາມຕັ້ງໃຈ.</p>
  </div>
</footer>

ໂຄ້ດ HTML ຂ້າງເທິງນີ້ໄດ້ແບ່ງໂຄງສ້າງອອກເປັນສອງສ່ວນໃຫຍ່ຄື footer-container ສຳລັບຈັດລຽງຖັນຂໍ້ມູນ ແລະ footer-bottom ສຳລັບສະແດງຂໍ້ຄວາມລິຂະສິດຢູ່ລຸ່ມສຸດ. ການໃຊ້ແທັກ <ul> ແລະ <li> ຍັງຊ່ວຍໃຫ້ລິ້ງຕ່າງໆຖືກຈັດເປັນລາຍການຢ່າງເປັນລະບຽບ.

2. ຈັດການຮູບແບບ ແລະ ສີສັນດ້ວຍ CSS

ເມື່ອເຮົາມີໂຄງສ້າງແລ້ວ, ຕໍ່ໄປເຮົາຈະໃຊ້ CSS ເພື່ອຈັດລຽງໃຫ້ທັງ 3 ຖັນຢຽງກັນຢ່າງສວຍງາມໂດຍໃຊ້ Flexbox ພ້ອມທັງກຳນົດສີພື້ນຫຼັງໃຫ້ເປັນສີເຂັ້ມເພື່ອໃຫ້ເບິ່ງທັນສະໄໝ.

/* ຕັ້ງຄ່າພື້ນຫຼັງ ແລະ ຕົວໜັງສືຂອງ Footer */
.site-footer {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 40px 0 0 0;
  font-family: sans-serif;
}

/* ຈັດລຽງຖັນດ້ວຍ Flexbox */
.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-column {
  flex: 1;
  margin: 0 15px;
}

/* ຕົບແຕ່ງຫົວຂໍ້ ແລະ ລິ້ງ */
.footer-column h3 {
  color: #fca311;
  margin-bottom: 15px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li a {
  color: #cccccc;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

/* ປ່ຽນສີລິ້ງເວລາເອົາເມົ້າຊີ້ */
.footer-column ul li a:hover {
  color: #ffffff;
}

/* ແຖບລິຂະສິດລຸ່ມສຸດ */
.footer-bottom {
  background-color: #000000;
  text-align: center;
  padding: 15px 0;
  margin-top: 30px;
  font-size: 14px;
}

ໃນໂຄ້ດ CSS ນີ້, ການໃຊ້ display: flex; ເຮັດໃຫ້ footer-column ທັງ 3 ຖັນຈັດລຽງກັນຕາມລວງນອນໂດຍອັດຕະໂນມັດ. ນອກຈາກນັ້ນຍັງມີການໃຊ້ transition ຢູ່ບ່ອນລິ້ງເພື່ອໃຫ້ການປ່ຽນສີເວລາເອົາເມົ້າໄປຊີ້ (Hover) ມີຄວາມນຸ່ມນວນ ແລະ ເປັນທຳມະຊາດຂຶ້ນ.

3. ປັບແຕ່ງໃຫ້ສະແດງຜົນໄດ້ດີໃນມືຖື (Responsive)

ການອອກແບບເວັບໄຊໃນຍຸກນີ້ຕ້ອງຮອງຮັບການໃຊ້ງານເທິງໂທລະສັບມືຖື. ເຮົາຈະໃຊ້ Media Query ເພື່ອສັ່ງໃຫ້ຖັນຕ່າງໆລຽງຊ້ອນກັນໃນແນວຕັ້ງເມື່ອໜ້າຈໍມີຂະໜາດນ້ອຍລົງ.

/* ສັ່ງໃຫ້ຈັດລຽງເປັນແນວຕັ້ງສຳລັບໜ້າຈໍທີ່ນ້ອຍກວ່າ 768px */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-column {
    margin: 15px 0;
  }
}

ໂຄ້ດສ່ວນນີ້ຈະກວດສອບວ່າຖ້າໜ້າຈໍຜູ້ໃຊ້ມີຂະໜາດນ້ອຍກວ່າ 768 ພິກເຊວ, ຄຳສັ່ງ flex-direction: column; ຈະບັງຄັບໃຫ້ແຕ່ລະຖັນຍ້າຍລົງມາລຽງຊ້ອນກັນ. ສິ່ງນີ້ຊ່ວຍໃຫ້ຜູ້ອ່ານເທິງມືຖືບໍ່ຕ້ອງເລື່ອນໜ້າຈໍໄປທາງຊ້າຍ ຫຼື ຂວາ ແລະ ອ່ານຂໍ້ມູນໄດ້ງ່າຍຂຶ້ນ.

ສະຫຼຸບ

ພຽງແຕ່ຂັ້ນຕອນງ່າຍໆເຫຼົ່ານີ້, ທ່ານກໍສາມາດສ້າງ Footer ທີ່ສວຍງາມ, ມີຄວາມເປັນມືອາຊີບ ແລະ ສະແດງຜົນໄດ້ດີທັງໃນຄອມພິວເຕີ ແລະ ມືຖື. ການມີ Footer ທີ່ດີຈະຊ່ວຍຍົກລະດັບປະສົບການການໃຊ້ງານ (UX) ຂອງເວັບໄຊທ່ານໃຫ້ສົມບູນແບບຍິ່ງຂຶ້ນ. ແນ່ນອນວ່າການຂຽນໂຄ້ດດ້ວຍຕົນເອງທຸກພາກສ່ວນອາດຈະຕ້ອງໃຊ້ເວລາໃນການປັບແຕ່ງພໍສົມຄວນ. ຖ້າທ່ານຕ້ອງການປະຢັດເວລາ ແລະ ຢາກໄດ້ເວັບໄຊທີ່ມີອົງປະກອບຄົບຖ້ວນທຸກໜ້າຈໍແບບພ້ອມໃຊ້ງານ, ທ່ານສາມາດເລືອກຊົມ Template ສວຍງາມ ແລະ ທັນສະໄໝໄດ້ທີ່ laotemplate.com, ບ່ອນທີ່ພວກເຮົາກຽມໂຄງສ້າງເວັບໄຊທີ່ດີທີ່ສຸດໄວ້ໃຫ້ທຸລະກິດຂອງທ່ານພ້ອມນຳໄປໃຊ້ງານໄດ້ທັນທີ!