ວິທີການຈັດລຽງແລະເລື່ອນອົງປະກອບໃນຫນ້າເວັບ

ການຈັດຕໍາແຫນ່ງຂອງລາຍການໃນຫນ້າເວັບແມ່ນສໍາຄັນຕໍ່ການອອກແບບໂດຍລວມ. ເຖິງແມ່ນວ່າມີວິທີອື່ນທີ່ມີອິດທິພົນຕໍ່ຮູບແບບເຊັ່ນການນໍາໃຊ້ຕາຕະລາງ ( ທີ່ພວກເຮົາບໍ່ແນະນໍາ ), ທີ່ດີທີ່ສຸດແມ່ນໃຊ້ CSS .

ຂ້າງລຸ່ມນີ້, ພວກເຮົາຈະເບິ່ງວິທີການນໍາໃຊ້ຄຸນລັກສະນະແບບ CSS ແບບງ່າຍໆໃນເສັ້ນເພື່ອຈັດຮູບພາບ, ຕາຕະລາງ, ວັກແລະອື່ນໆ.

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

ຈັດແຈງຂໍ້ສັບຕ່າງໆ

ໂຄ້ດວັກແມ່ນສະຖານທີ່ທໍາອິດທີ່ຈະເລີ່ມຕົ້ນໃນການວາງອອກຫນ້າເວັບຂອງທ່ານ. ມັນເປີດແລະປິດ tags ຄື:

ການສອດຄ່ອງໃນຕອນຕົ້ນຂອງຂໍ້ຄວາມໃນວັກແມ່ນຢູ່ເບື້ອງຊ້າຍຂອງຫນ້າ, ແຕ່ວ່າທ່ານຍັງສາມາດຈັດແຈງຂໍ້ຄວາມຂອງທ່ານໄປທາງຂວາແລະກາງ.

ການນໍາໃຊ້ຊັບສົມບັດທີ່ເລື່ອນລອຍສາມາດເຮັດໃຫ້ທ່ານຈັດແຈງຂໍ້ຕໍ່ໄປຫາຂວາຫຼືຊ້າຍຂອງອົງປະກອບແມ່ໄດ້. ທຸກອົງປະກອບອື່ນໆພາຍໃນອົງປະກອບແມ່ບົດນັ້ນຈະໄຫລປະມານອົງປະກອບທີ່ລອຍຕົວ.

ເພື່ອໃຫ້ມີຜົນກະທົບທີ່ດີທີ່ສຸດກັບວັກຫນຶ່ງ, ມັນດີທີ່ສຸດທີ່ຈະກໍານົດຄວາມກວ້າງຂອງວັກທີ່ນ້ອຍກວ່າອົງປະກອບ (ພໍ່ແມ່).

ຈັດລຽງຂໍ້ຄວາມໃນພາຍໃນຂອບເຂດ

ການໂຕ້ຖຽງທີ່ຫນ້າສົນໃຈຫຼາຍທີ່ສຸດສໍາລັບບົດເລື່ອງວັກແມ່ນ "justify," ເຊິ່ງບອກຕົວທ່ອງເວັບໃຫ້ສະແດງຂໍ້ຄວາມທີ່ສອດຄ່ອງ, ສໍາຄັນ, ທັງດ້ານຂວາແລະຊ້າຍຂອງປ່ອງຢ້ຽມ.

ເພື່ອແກ້ໄຂຂໍ້ຄວາມໃນວັກຫນຶ່ງ, ທ່ານຈະໃຊ້ຄຸນສົມບັດທີ່ສອດຄ່ອງກັບຂໍ້ຄວາມ.

ນອກນັ້ນທ່ານຍັງສາມາດເຊື່ອມໂຍງຂໍ້ຄວາມທັງຫມົດພາຍໃນວັກໄປທາງດ້ານຂວາຫຼືທາງຊ້າຍ (ຄ່າເລີ່ມຕົ້ນ) ໂດຍໃຊ້ຄຸນສົມບັດທີ່ສອດຄ່ອງກັບຂໍ້ຄວາມ.

ຄຸນສົມບັດຂອງ text-align ຈະສອດຄ່ອງຂໍ້ຄວາມພາຍໃນອົງປະກອບ. ໂດຍວິທີທາງການ, ມັນບໍ່ຄວນຈະສອດຄ່ອງຮູບພາບທີ່ມີຢູ່ໃນວັກຫຼືອົງປະກອບອື່ນໆ, ແຕ່ວ່າຕົວທ່ອງເວັບສ່ວນໃຫຍ່ປະຕິບັດການຮູບພາບທີ່ເປັນເສັ້ນສໍາລັບຊັບສິນນີ້.

ການຈັດຮູບພາບ

ການນໍາໃຊ້ຊັບສິນທີ່ເລື່ອນພາບໃນແທັບຮູບພາບທ່ານສາມາດກໍານົດຕໍາແຫນ່ງຂອງຮູບພາບໃນຫນ້າເວັບແລະວິທີການສະຫຼຸບເນື້ອຫາຂອງມັນ.

ເຊັ່ນດຽວກັນກັບວັກຂ້າງເທິງ, ຄຸນສົມບັດແບບເລື່ອນລົງໃນແທັບຮູບຈະວາງຕໍາແຫນ່ງຮູບພາບຂອງທ່ານໃນຫນ້າເວັບແລະບອກຕົວທ່ອງເວັບກ່ຽວກັບວິທີການໄຫຼຂໍ້ຄວາມແລະອົງປະກອບອື່ນໆທີ່ອ້ອມຮອບຮູບພາບນັ້ນ.

ຂໍ້ຄວາມດັ່ງຕໍ່ໄປນີ້ tag ຮູບພາບຂ້າງເທິງຈະໄຫຼປະມານຮູບພາບໄປທາງຂວາເປັນພາບສະແດງຢູ່ທາງຊ້າຍຂອງຫນ້າຈໍ.

ຖ້າຂ້ອຍຕ້ອງການຂໍ້ຄວາມທີ່ຈະຢຸດການຫໍ່ໃສ່ຮູບພາບ, ຂ້ອຍໃຊ້ຄຸນສົມບັດທີ່ຊັດເຈນ:









ການຈັດລຽງຫລາຍກວ່າບົດ

ຢ່າງໃດກໍຕາມ, ສິ່ງໃດກໍ່ຕາມຖ້າທ່ານຕ້ອງການທີ່ຈະສອດຄ່ອງຫຼາຍກ່ວາພຽງແຕ່ວັກຫຼືຮູບພາບເທົ່ານັ້ນ? ທ່ານພຽງແຕ່ສາມາດເຮັດໃຫ້ຄຸນສົມບັດແບບໃນແຕ່ລະວັກແຕ່ມີແທັກທີ່ທ່ານສາມາດນໍາໃຊ້ໄດ້ທີ່ມີປະສິດທິຜົນຫຼາຍຂຶ້ນ:

ພຽງແຕ່ອ້ອມຮອບຂໍ້ຄວາມແລະຮູບພາບ (ລວມທັງ HTML tags ) ທີ່ມີແທັບແລະຄຸນລັກສະນະຂອງແບບ (float ຫຼື text-align) ແລະທຸກສິ່ງທຸກຢ່າງຢູ່ໃນພະແນກນັ້ນຈະສອດຄ່ອງກັບວິທີທີ່ທ່ານຕ້ອງການ.

ຈົ່ງຈື່ໄວ້ວ່າການສອດຄ່ອງຕື່ມໃສ່ວັກຫຼືຮູບພາບພາຍໃນພະແນກຈະໄດ້ຮັບການຍົກຍ້ອງ, ຍົກເລີກການໂຄສະນາ.