ວິທີເຮັດຮູບສາມຫລ່ຽມ CSS: ວິທີການສະດວກທີ່ສຸດ

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

ບໍ່ແມ່ນທຸກຄົນຮູ້ວິທີການສ້າງຕົວເລກດັ່ງກ່າວໂດຍຜ່ານການ Sheets Cascading Style, ແລະກໍາລັງສົງໄສວ່າວິທີການເພື່ອເຮັດໃຫ້ສາມຫຼ່ຽມໃນ CSS ໄດ້.

ຄໍາຮ້ອງສະຫມັກໃນການອອກແບບຂອງສະຖານທີ່

ໃນສາມຫຼ່ຽມການອອກແບບເວັບໄຊຕ໌ຢູ່ທົ່ວທຸກແຫ່ງ. ພວກເຂົາເຈົ້າແມ່ນອອກຄໍາແນະນໍາ, ເມນູ, ອົງປະກອບ UI ຕ່າງໆ. ບາງຄັ້ງພວກເຂົາເຈົ້າໄດ້ຖືກນໍາໃຊ້ເພື່ອສ້າງຕົວຊີ້ວັດຂອງຂະບວນການ Boot ໄດ້. ແລະຖ້າຫາກວ່າກ່ອນຫນ້ານີ້ມັນເປັນໄປໄດ້ທີ່ຈະເຮັດແນວໃດໂດຍບໍ່ມີການໃຫ້ເຂົາເຈົ້າ, ແຕ່ໃນປັດຈຸບັນມັນເປັນໄປບໍ່ໄດ້, ແລະພັດທະນາແມ່ນພັນທະທີ່ຈະໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການດັ່ງກ່າວ. ຫຼັງຈາກທີ່ທັງຫມົດ, ໃນມື້ນີ້ສ້າງຂຶ້ນພາຍໃນ CSS ສາມຫຼ່ຽມ - ເປັນສ່ວນຫນຶ່ງທີ່ສໍາຄັນໃນການກໍ່ສ້າງການເຊື່ອມຕໍ່ລະຫວ່າງພາກສ່ວນຂອງການໂຕ້ຕອບຂອງແລະເຂົ້າໄປໃນ merge ນິຕິບຸກຄົນດຽວ.

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

A ວິທີການຂອງການສ້າງກອບການນໍາໃຊ້

ວິທີທໍາອິດອະນຸຍາດໃຫ້ທ່ານສາມາດສ້າງສາມຫຼ່ຽມໄດ້ໃນ CSS ໄດ້ - ຊາຍແດນ. ພຣະອົງໄດ້ຖືກນໍາໃຊ້ເຟຣມ. ເຖິງວ່າຈະມີຄວາມຈິງທີ່ວ່າຂອບເຂດຊາຍແດນທີ່ເກີດຂື້ນນໍາໃຊ້ຄຸນສົມບັດຊາຍແດນບໍ່ໄດ້ກ່ຽວຂ້ອງໂດຍກົງກັບສາມຫລ່ຽມ, ມັນຖືກນໍາໃຊ້ຫຼາຍທີ່ສຸດມັກຈະສໍາລັບຈຸດປະສົງນີ້.

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

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

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

ການນໍາໃຊ້ psevdoedementov

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

ໂດຍສົມທົບພວກເຂົາ, ພັດທະນາການສ້າງຄວາມຫຼາກຫຼາຍຂອງນັກກິລາທີ່ສວຍງາມ, ການນໍາໃຊ້ຄຸນສົມບັດ position: relative ກັບອົງປະກອບພໍ່ແມ່ໄດ້. ນີ້ແມ່ນເຮັດໃນຄໍາສັ່ງທີ່ຈະ Pseudo-ບໍ່ຍ້າຍອອກຈາກທີ່ນັ່ງຂອງພວກເຂົາ.

ບວກກັບການນໍາໃຊ້ກອບ CSS ສໍາລັບການສ້າງສາມຫຼ່ຽມແມ່ນ:

• ການແກ້ໄຂໄວແລະງ່າຍຂອງຂະຫນາດແລະສີທີ່ມີການຊ່ວຍເຫຼືອຂອງຄຸນສົມບັດໄດ້;
• ສະຫນັບສະຫນູນຕົວທ່ອງເວັບທັງຫມົດ.

cons:

• ເນື່ອງຈາກວ່າມັນໃຊ້ກອບການ, ບໍ່ມີຄວາມເປັນໄປໄດ້ທີ່ຈະສະຫມັກຂໍເອົາ gradients, shadows;
• ບາງຄັ້ງ, ໃນເວລາທີ່ຜູ້ໃຊ້ໄດ້ເບິ່ງຢູ່ໃນຫນ້າຂອງຕົວທ່ອງເວັບ Firefox, ມູນຄ່າບໍ່ມີເພດ; ອາດຈະບໍ່ເຮັດວຽກ, ແລະນີ້ຈະມີການບິດເບືອນຮູບພາບ.

ການນໍາໃຊ້ຮູບພາບພ້ອມທີ່ຈະເຮັດ

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

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

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

ວິທີການຕາລາງຄວ່ໍາ

ວິທີການຫນຶ່ງແມ່ນເພື່ອສ້າງວິທີການຂອງ CSS ຄວ່ໍາຮຽບຮ້ອຍ. ມີສອງຫົວຫນ່ວຍພື້ນຖານແມ່ນ. ແຕ່ບາງຄົນໃຊ້ pseudo.

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

ຜົນການຄົ້ນຫາ

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

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