ວິວັດທະນະສະພາບ: ການສ້າງການນຳເຂົ້າສະເພາະທີ່ມີການສະແດງກວດກາຄວາມເລິກທີ່ສະເພາະ

ການສ້າງ: ການນຳເຂົ້າສະເພາະທີ່ມີການສະແດງກວດກາຄວາມເລິກທີ່ສະເພາະ

ການສ້າງການນຳເຂົ້າສະເພາະທີ່ຕອບສະໜອງ

第一步 - ການເພີ່ມ HTML：

<!-- ການສະແດງການນຳເຂົ້າສາຍ -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

第二步 - ການເພີ່ມ CSS：

/* ການຕັດສິນທິການສະແດງວິວັດທະນະສະພາບຂອງການນຳເຂົ້າສາຍ */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* ການສະແດງການຫົວໜ້າ */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* ການກະຈາຍກວດກາຄວາມເລິກທີ່ສະເພາະ. ຖ້າເຈົ້າມີສອງການຫົວໜ້າ, ກະຈາຍ 50%, ຖ້າເຈົ້າມີສາມການຫົວໜ້າ, ກະຈາຍ 33.33%, ແລະອີກ. */
  text-align: center; /* ຖ້າເຈົ້າຕ້ອງການຂຽນຂໍ້ຄວາມຂຶ້ນຂວາສາຍຂອງໜ້າສະເພາະໃນໜ້າສະເພາະ */
}
/* ການເພີ່ມສີທີ່ຫຼິ້ນຫຼັງມື */
.navbar a:hover {
  background-color: #000;
}
/* ການຕັດສິນທິການສະແດງວິວັດທະນະສະພາບຂອງການຫົວໜ້າທີ່ກຳລັງດຳເນີນຢູ່ */
.navbar a.active {
  background-color: #04AA6D;
}
/* ຕັດສິນທິການຕອບສະໜອງ - ໃນໜ້າສະເພາະທີ່ມີລະບົບສະເພາະລະບົບທີ່ມີລະບົບຂະໜາດນ້ອຍກວ່າ 500 ກຳນູນວິນ, ສະແດງການຫົວໜ້າການນຳເຂົ້າສາຍທີ່ສະເພາະຈະກະຈັດລວມກັນຫລັງຈາກການປ່ຽນຕາມຂະໜາດສະເພາະຈະປ່ຽນຕາມລະບົບທີ່ມີລະບົບທີ່ມີລະບົບ */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* ຖ້າເຈົ້າຕ້ອງການຂຽນຂໍ້ຄວາມຂຶ້ນຂວາສາຍຂອງໜ້າສະເພາະໃນໜ້າສະເພາະຂະໜາດນ້ອຍ */
  }
}

亲自试一试

相关页面

教程：CSS 导航栏