ວິງວາງຄວາມຄິດ: ບໍ່ຕັດຖານຄວາມຄິດ

ວິງວາງຄວາມຄິດທີ່ຈະກັບກວດກາສຳພັນ.

ຄັ້ງທີໜຶ່ງ - ກະກຽມ HTML:

<div class="divider">Lorem Ipsum</div>

ຄັ້ງທີສອງ - ກະກຽມ CSS:

.divider {
  font-size: 30px;
  display: flex;
  ຈະກະກຽມການວາງຄວາມຄິດໃນກາງບໍ່ຕັດຖານ.
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

ສອບທາງເອງຂອງທ່ານ.

ກໍລະນີສະແດງ:

ກໍລະນີນີ້ສອນພວກເຈົ້າວ່າເພື່ອໃຊ້ CSS ເພື່ອສ້າງບໍ່ຕັດຖານຄວາມຄິດ.

ກ່ອນນັ້ນຈະຕ້ອງໃຫ້ປະກອບ HTML ທີ່ມີຊື່ປະເພດ "divider" ແລະຈະຕ້ອງບັນທຶກຄວາມຄິດທີ່ຈະສະແດງ (ໃນກໍລະນີນີ້ຄວາມຄິດແມ່ນ "Lorem Ipsum").

ຫຼັງຈາກນັ້ນຈະໃຊ້ CSS ເພື່ອກະກຽມ .divider ຈະກະກຽມການວາງຄວາມຄິດໃນກາງບໍ່ຕັດຖານ. ຈະກະກຽມການວາງຄວາມຄິດໃນກາງບໍ່ຕັດຖານ. align-items: center;

ຫຼັງຈາກນັ້ນຈະໃຊ້ບຸກສີທີ່ບໍ່ຕັດຖານເພື່ອໃຫ້ຄວາມຄິດຢູ່ທາງມັດຂອງບໍ່ຕັດຖານ. ::before ແລະ ::after ເພື່ອເພີ່ມສັນຍານທີ່ຢູ່ທາງສອງຂອງບໍ່ຕັດຖານ. flex: 1 ເພື່ອໃຫ້ພວກເຂົາຈະນັ່ງ. .divider ສະຖານທີ່ທັງໝົດຂອງປະກອບທີ່ບໍ່ແມ່ນຄວາມຄິດ. content: '' ເພື່ອຮັບປະກັນວ່າສອງບຸກສີທີ່ບໍ່ມີສັນຍານໃດໆ.

ຫຼັງຈາກນັ້ນຈະກະກຽມຄວາມກະຈາຍພາຍໃນທີ່ຫຼັງວັດຖຸຫຼັງມາສຳພັນລາວວ່າເພີ່ມລະບຽບຮູບແບບບໍ່ຕັດຖານຂອງບໍ່ຕັດຖານທີ່ບໍ່ມີສັນຍານໃດໆ.