ຮັກສາຈັງຫວະແນວຕັ້ງດ້ວຍ CSS ແລະ jQuery

ເນື້ອຫາ

• ວາງປະເພດອອກ
• ຈັງຫວະຕັ້ງ
• ການປະຕິບັດຈັງຫວະ
• ການຈັດການກັບຮູບພາບຕ່າງໆ
• ການປັບປຸງ jQuery
• ສະຫຼຸບ

• ຄວາມຮູ້ທີ່ ຈຳ ເປັນ: CSS, jQuery ພື້ນຖານ
• ຕ້ອງການ: jQuery, CSS, HTML
• ເວລາຂອງໂຄງການ: 30 ນາທີ
• ດາວໂຫລດໄຟລ໌ແຫຼ່ງ

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

ວາງປະເພດອອກ

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

ຈັງຫວະຕັ້ງ

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

ການປະຕິບັດຈັງຫວະ

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

ໃຫ້ປະຕິບັດດ້ວຍເອກະສານຕົວຢ່າງ. ກ່ອນອື່ນ ໝົດ, ພວກເຮົາຈະ ກຳ ນົດການຕີໂດຍການສ້າງຕາຂ່າຍໄຟຟ້າທີ່ເບິ່ງເຫັນໄດ້. ເພື່ອເຮັດສິ່ງນີ້, ພວກເຮົາຈະໃຊ້ຮູບພາບພື້ນຫລັງທີ່ເຮັດຊ້ ຳ ອີກເພື່ອແຕ້ມເສັ້ນແນວນອນທີ່ມີຄວາມຍາວ 22px ຫ່າງກັນເລື້ອຍໆ:

1. html {ພື້ນຫລັງ: #fff url (ພື້ນຖານ _22.png); }

Hurray, ພວກເຮົາມີເຈ້ຍເປັນເສັ້ນຂອງພວກເຮົາ!

ທ່ານຈະສັງເກດວ່າບໍ່ມີສິ່ງໃດເລີຍ. ເພື່ອເຮັດໃຫ້ທຸກສິ່ງທຸກຢ່າງລຽນແຖວພວກເຮົາຕ້ອງການຂອບທາງລຸ່ມຂອງອົງປະກອບທັງ ໝົດ ທີ່ຈະຕີ ໜຶ່ງ ເສັ້ນນັ້ນ. ວິທີທີ່ງ່າຍທີ່ສຸດໃນການເຮັດສິ່ງນັ້ນແມ່ນໃຫ້ແນ່ໃຈວ່າທຸກໆອົງປະກອບມີຄວາມສູງຕັ້ງ (ລວມທັງຂອບ) ເຊິ່ງມີຫລາຍໆ 22. ນີ້ແມ່ນບາງ CSS ທີ່ເຮັດພຽງແຕ່ເທົ່ານັ້ນ. ຂ້ອຍ ກຳ ລັງໃຊ້ ໜ່ວຍ REM, ແຕ່ໃຫ້ EM backback ສຳ ລັບ browser ທີ່ບໍ່ເຂົ້າໃຈ REM. ຂ້າພະເຈົ້າຍັງລວມເອົາຫນ່ວຍບໍລິການທຽບເທົ່າ PX ທຽບໃສ່ໃນ ຄຳ ເຫັນ. ຖ້າທ່ານຍັງບໍ່ເຂົ້າໃຈເຖິງ REM / EM, ທ່ານພຽງແຕ່ສາມາດໃຊ້ຄ່າ px ແທນ - ພວກມັນເທົ່າກັນ:

1. html {/ * font-size: 16px, line-height: 22px * /
2. font: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. ພື້ນຫລັງ: #fff url (ພື້ນຖານ _22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * ຂອບດ້ານເທິງແລະລຸ່ມແມ່ນທັງສອງ 22px * /
6. / * em fallback * / ຂອບ: 1.375em 0;
7. ຂອບ: 1.375rem 0; }
8. h1 {/ * font-size ແມ່ນ 32px, ຄວາມສູງຂອງເສັ້ນແມ່ນ 44px * /
9. / * em fallback * / font-size: 2em;
10. font-size: 2rem; ເສັ້ນສູງ: 1.375; }
11. h2 {/ * font-size ແມ່ນ 26px, ຄວາມສູງຂອງເສັ້ນແມ່ນ 44px * /
12. / * em fallback * / font-size: 1.75em;
13. font-size: 1.75rem; line-height: 1.5714285714; }
14. h3, h4, h5, h6 {/ * font-size ແມ່ນ 22px, ຂະ ໜາດ ຂອງເສັ້ນແມ່ນ 22px * /
15. / * em fallback * / font-size: 1.375em;
16. font-size: 1.375rem; ເສັ້ນ - ສູງ: 1; }
17. p, ul, blockquote {/ * ຂອບສ່ວນລຸ່ມແມ່ນ 22px, ຄວາມສູງຂອງເສັ້ນແມ່ນສືບທອດມາຈາກ html (22px) * /
18. / * em fallback * / margin-top: 0; ຂອບໃບ - ລຸ່ມ: 1.375em;
19. ຂອບໃບ - ດ້ານເທິງ: 0; ຂອບໃບ - ລຸ່ມ: 1.375rem; }

ລອງພິຈາລະນາເບິ່ງສິ່ງທີ່ໃຫ້ພວກເຮົາ. ສັງເກດວິທີການທັງ ໝົດ ຂອງຂໍ້ຄວາມສອດຄ່ອງກັນດີ? ມັນບໍ່ໄດ້ນັ່ງຢູ່ໃນພື້ນຖານ, ແຕ່ວ່າມັນມີຈັງຫວະແນວຕັ້ງທີ່ສາມາດຄາດເດົາໄດ້. ມັນງາມແລະກະທັດຮັດ.

ການຈັດການກັບຮູບພາບຕ່າງໆ

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

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

1. ສະແດງຄວາມສູງຂອງແຕ່ລະຮູບ.
2. ເບິ່ງ ຈຳ ນວນເທົ່າໃດຂອງມູນຄ່າພື້ນຖານທີ່ແບ່ງອອກເປັນພື້ນທີ່ແນວຕັ້ງທີ່ຮູບພາບປະຈຸບັນຂຶ້ນ, ແລະຍັງເຫຼືອ.
3. ຫັກສ່ວນທີ່ເຫຼືອຈາກພື້ນຖານເພື່ອໃຫ້ການຊົດເຊີຍທີ່ພວກເຮົາຕ້ອງການ ນຳ ໃຊ້ໃນຮູບພາບ.
4. ນຳ ໃຊ້ຄ່າຊົດເຊີຍເປັນຂອບຂອບທາງລຸ່ມຂອງຮູບ.

ສ່ວນລຸ່ມຂອງພື້ນທີ່ຕັ້ງຂອງຮູບພາບຕອນນີ້ຈະຖືກຕ້ອງສອດຄ່ອງກັບຕາຂ່າຍໄຟຟ້າເບື້ອງຕົ້ນ. ນີ້ແມ່ນ ໜ້າ ທີ່ພື້ນຖານຂອງ jQuery ທີ່ເຮັດເຊັ່ນນີ້:

1. $ (ໜ້າ ຕ່າງ) .bind ('load', function () {
2. $ ("img") ແຕ່ລະ (function () {
3. / * ຕົວແປ * /
4. var this_img = $ (ນີ້);
5. var ພື້ນຖານ = 22;
6. var img_height = this_img.height ();
7. / * ເຮັດຄະນິດສາດ * /
8. var ທີ່ເຫລືອ = parseFloat (img_height% ພື້ນຖານ);
9. / * ພວກເຮົາ ຈຳ ເປັນຕ້ອງເພີ່ມເທົ່າໃດ? * /
10. var ຊົດເຊີຍ = parseFloat (ພື້ນຖານ - ສ່ວນທີ່ເຫຼືອ);
11. / * ໃຊ້ຂອບໃບກັບຮູບພາບ * /
12. this_img.css ("ຂອບດ້ານລຸ່ມ", ຊົດເຊີຍ + "px");
13. });
14. });

ເປັນຫຍັງ window.bind ເສັ້ນ? ເນື່ອງຈາກວ່າພວກເຮົາຕ້ອງໄດ້ລໍຖ້າຈົນກ່ວາຮູບພາບຈະຖືກໂຫລດກ່ອນທີ່ພວກເຮົາຈະສາມາດຮັບເອົາຂະ ໜາດ ຂອງມັນໄດ້ຢ່າງ ໜ້າ ເຊື່ອຖື. ນີ້ແມ່ນຕົວຢ່າງທີ່ມີລະຫັດພື້ນຖານນີ້ແລ່ນ.

ການປັບປຸງ jQuery

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

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

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

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

ຫນ້າທີ່ເຮັດວຽກພຽງແຕ່ຄັ້ງດຽວ, ແຕ່ໃນການອອກແບບທີ່ເປັນຂອງແຫຼວຮູບພາບຈະປ່ຽນຄວາມສູງເມື່ອຕົວທ່ອງເວັບມີຂະ ໜາດ ໃໝ່ (ລອງປັບຂະ ໜາດ ຕົວຢ່າງໃຫ້ບາງສິ່ງບາງຢ່າງທີ່ຂ້ອນຂ້າງແຄບເພື່ອເບິ່ງສິ່ງນີ້). ການປັບຂະ ໜາດ ເຮັດໃຫ້ຈັງຫວະເກີດຂື້ນອີກ. ພວກເຮົາຕ້ອງການໃຫ້ ໜ້າ ທີ່ ດຳ ເນີນການຫຼັງຈາກ browser ໄດ້ປັບຂະ ໜາດ ພ້ອມທັງຫຼັງຈາກໂຫລດ ໜ້າ ເວັບ. ການຈັດວາງຂອງແຫຼວຍັງແນະ ນຳ ບັນຫາອື່ນໆ; ຮູບພາບສາມາດເປັນ pixels ສ່ວນໃຫຍ່, ຍົກຕົວຢ່າງ 132.34px. ມັນສາມາດເຮັດໃຫ້ເກີດຜົນໄດ້ຮັບທີ່ບໍ່ຄາດຄິດ, ເຖິງແມ່ນວ່າພວກເຮົາຈະ ນຳ ໃຊ້ອັດຕາສ່ວນ ໜ້ອຍ (ຖ້າທ່ານສົນໃຈ, ນີ້ແມ່ນເຫດຜົນທີ່ວ່າ: trac.webkit.org/wiki/LayoutUnit). ສະນັ້ນ, ພວກເຮົາ ຈຳ ເປັນຕ້ອງນວດຮູບໃຫ້ເປັນຄວາມສູງຂອງ pixels ລວງທັງ ໝົດ ເພື່ອຫລີກລ້ຽງຂໍ້ບົກຜ່ອງທີ່ເກີດຈາກ pixels ສ່ວນ.

ສຸດທ້າຍ, ພວກເຮົາຄວນເຮັດໃຫ້ສິ່ງນີ້ກາຍເປັນ ໜ້າ ທີ່ທີ່ສາມາດ ນຳ ໃຊ້ຄືນ ໃໝ່ ໄດ້ຫຼາຍຂື້ນ. ໃນຄວາມເປັນຈິງ, ດ້ວຍຄວາມສັບສົນວິທີແກ້ໄຂຕົວຈິງແມ່ນຕ້ອງການຫຼາຍກວ່າທິດສະດີທາງທິດສະດີ, ພວກເຮົາຄວນສ້າງປັthatກອິນທີ່ສາມາດ ນຳ ໃຊ້ຄືນ ໃໝ່ ໃນໂຄງການອື່ນ.

ໃນຕົວຢ່າງສຸດທ້າຍທ່ານຈະໄດ້ພົບເຫັນລະຫັດທີ່ບັນລຸໄດ້ທັງ ໝົດ ນີ້. ໂປແກຼມ JavaScript ທີ່ຖືກ ນຳ ໃຊ້ແມ່ນມີ ຄຳ ເຫັນຫຼາຍເພື່ອໃຫ້ທ່ານສາມາດຕິດຕາມໄດ້. ທ່ານສາມາດໃຊ້ປັtheກອິນໂດຍການໂທຫາມັນດັ່ງຕໍ່ໄປນີ້:

1. $ (ໜ້າ ຕ່າງ) .bind ('load', function () {
2. ໂດລາ ("img"). baselineAlign ();
3. });

ຫຼື, ທ່ານສາມາດບອກ plug-in ເພື່ອ ນຳ ໃຊ້ຂອບ ສຳ ລັບບັນຈຸຊື່, ຖ້າມີຢູ່ເປັນພໍ່ແມ່ຂອງຮູບ:

1. $ (ໜ້າ ຕ່າງ) .bind ('load', function () {
2. $ ("img"). ລາຄາພື້ນຖານ ({ບັນຈຸ: 'ປpopອບອັບ'});
3. });

ສະຫຼຸບ

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

ໃນຂະນະທີ່ CSS ເຕີບໃຫຍ່ພວກເຮົາສືບຕໍ່ມີຄຸນລັກສະນະເພີ່ມເຕີມໃຫ້ສອດຄ່ອງກັບອ້າຍນ້ອງພິມຂອງພວກເຮົາ, ດັ່ງນັ້ນຄວາມເຂົ້າໃຈດີກ່ຽວກັບປະເພດຈະກາຍເປັນສິ່ງ ສຳ ຄັນຫຼາຍ ສຳ ລັບການສ້າງເວັບໄຊທ໌ທີ່ມີຄຸນນະພາບ. ຖ້າທ່ານຕ້ອງການຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບປະເພດໂດຍທົ່ວໄປຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ www.thinkingwithtype.com (ແລະຊື້ປື້ມດັ່ງກ່າວໄປ ນຳ). ຖ້າທ່ານຢູ່ຫລັງຈາກບົດຄວາມກ່ຽວກັບ CSS ກ່ຽວກັບການຮັກສາປະເພດມີຫລາຍບົດຄວາມທັງຢູ່ທີ່ນີ້ແລະບ່ອນອື່ນໃນເວັບ. ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ເຂົ້າຫາຫຼ້າສຸດຈາກ Mark Boulton ແລະ Elliot Jay Stocks, ເຊິ່ງທັງສອງຄົນເວົ້າເລື້ອຍໆກ່ຽວກັບປະເພດທີ່ກ່ຽວຂ້ອງກັບການອອກແບບເວັບໂດຍສະເພາະ.

ມີຄວາມມ່ວນ!