ຄວາມເຂົ້າໃຈກ່ຽວກັບ IFrames ເຮັດວຽກໃນການອອກແບບເວັບໄຊທ໌ໃດ
ເມື່ອທ່ານຕິດຢູ່ໃນ HTML ຂອງທ່ານ, ທ່ານມີສອງໂອກາດທີ່ຈະເພີ່ມ ຄໍເຕົ້າໄຂ່ທີ່ CSS ໃຫ້ມັນ:
- ທ່ານສາມາດສະຫມັກ IFRAME ຕົວມັນເອງ.
- ທ່ານສາມາດແບບຫນ້າໃນ IFRAME (ພາຍໃຕ້ເງື່ອນໄຂບາງຢ່າງ).
ການໃຊ້ CSS ເພື່ອສະແດງອົງປະກອບ IFRAME
ສິ່ງທໍາອິດທີ່ທ່ານຄວນພິຈາລະນາໃນເວລາທີ່ກໍາລັງແຕ່ງຢູ່ຖ້າຫາກວ່າ iframe ຂອງທ່ານແມ່ນ IFRAME ຕົວມັນເອງ. ໃນຂະນະທີ່ຕົວທ່ອງເວັບສ່ວນໃຫຍ່ປະກອບມີ iframes ໂດຍບໍ່ມີຮູບແບບພິເສດຫຼາຍ, ມັນຍັງເປັນຄວາມຄິດທີ່ດີທີ່ຈະເພີ່ມຮູບແບບບາງຢ່າງເພື່ອໃຫ້ພວກເຂົາສອດຄ່ອງ.
ນີ້ແມ່ນບາງຄໍເຕົ້າໄຂ່ທີ່ CSS ທີ່ຂ້ອຍສະເຫມີປະກອບຢູ່ໃນ iframe ຂອງຂ້ອຍ:
- margin: 0
- padding: 0
- border: none
- width: value
- height: value
ມີຄວາມກວ້າງແລະຄວາມສູງທີ່ກໍານົດໄວ້ໃນຂະຫນາດທີ່ເຫມາະສົມໃນເອກະສານຂອງຂ້ອຍ. ຕໍ່ໄປນີ້ແມ່ນຕົວຢ່າງຂອງກອບທີ່ບໍ່ມີຮູບແບບແລະມີພຽງແຕ່ພື້ນຖານທີ່ມີຄໍເຕົ້າໄຂ່ທີ່. ໃນຂະນະທີ່ທ່ານສາມາດເບິ່ງເຫັນໄດ້, ຮູບແບບເຫລົ່ານີ້ສ່ວນໃຫຍ່ແມ່ນເອົາເສັ້ນຂອບຮອບຖ້າ iframe, ແຕ່ພວກເຂົາຍັງຫມັ້ນໃຈວ່າຕົວທ່ອງເວັບທັງຫມົດສະແດງວ່າ iframe ມີຂອບຂອບ, padding ແລະຂະຫນາດດຽວກັນ.
HTML5 ແນະນໍາໃຫ້ທ່ານໃຊ້ຄຸນສົມບັດການໄຫລເກີນໄປເພື່ອເອົາແຖບເລື່ອນ, ແຕ່ວ່າມັນບໍ່ຫນ້າເຊື່ອຖື. ດັ່ງນັ້ນ, ຖ້າທ່ານຕ້ອງການເອົາຫຼືປ່ຽນແຖບເລື່ອນ, ທ່ານຄວນໃຊ້ຄຸນລັກສະນະການເລື່ອນພາບໃນ iframe ຂອງທ່ານເຊັ່ນກັນ. ການນໍາໃຊ້ຄຸນສົມບັດການເລື່ອນພາບ, ເພີ່ມມັນເຊັ່ນກັນກັບຄຸນລັກສະນະອື່ນໆແລະຫຼັງຈາກນັ້ນເລືອກເອົາຫນຶ່ງໃນສາມຄ່າ: yes, no, or auto. ແມ່ນແລ້ວບອກວ່າເບົາເຊີຈະສະເຫມີລວມແຖບເລື່ອນເຖິງແມ່ນວ່າພວກເຂົາບໍ່ຈໍາເປັນ. ບໍ່ມີການເວົ້າວ່າຈະເອົາແຖບເລື່ອນທັງຫມົດທີ່ຕ້ອງການຫລືບໍ່.
ອັດຕະໂນມັດແມ່ນຢູ່ໃນຕອນຕົ້ນແລະປະກອບມີແຖບເລື່ອນເວລາທີ່ພວກເຂົາຕ້ອງການແລະຖອນພວກມັນອອກເມື່ອບໍ່ມີ.
ນີ້ແມ່ນວິທີການປິດການເລື່ອນພາບດ້ວຍຄຸນສົມບັດການເລື່ອນພາບ:
scrolling = "no"
ນີ້ແມ່ນ iframe
ເພື່ອປິດການເລື່ອນພາບໃນ HTML5 ທ່ານຄວນຈະໃຊ້ຄຸນສົມບັດທີ່ເກີນຄວາມກົດດັນ. ແຕ່ຕາມທີ່ທ່ານສາມາດເຫັນໄດ້ໃນ ຕົວຢ່າງເຫຼົ່ານີ້ ມັນບໍ່ສາມາດເຮັດວຽກໄດ້ໄວໃນທຸກຕົວທ່ອງເວັບ.
ນີ້ແມ່ນວິທີທີ່ທ່ານຈະເຮັດໃຫ້ເລື່ອນເວລາທັງຫມົດທີ່ມີຄຸນສົມບັດ overflow:
style = "overflow: scroll"
ນີ້ແມ່ນ iframe
ບໍ່ ມີວິທີ ທີ່ຈະປິດການເລື່ອນເຕັມດ້ວຍຊັບສົມບັດທີ່ເກີນຄວາມກົດດັນ.
ຜູ້ອອກແບບຈໍານວນຫຼາຍຕ້ອງການ iframes ຂອງເຂົາເຈົ້າທີ່ຈະຜະສົມຜະສານກັບພື້ນຫລັງຂອງຫນ້າທີ່ພວກເຂົາຢູ່ນັ້ນເພື່ອໃຫ້ຜູ້ອ່ານບໍ່ຮູ້ວ່າ iframe ແມ່ນມີ. ແຕ່ທ່ານຍັງສາມາດເພີ່ມຮູບແບບເພື່ອເຮັດໃຫ້ພວກເຂົາໂດດເດັ່ນ. ການດັດແປງຂອບດັ່ງນັ້ນ iframe ສະແດງໃຫ້ເຫັນເຖິງງ່າຍແມ່ນງ່າຍ. ພຽງແຕ່ນໍາໃຊ້ຄຸນສົມບັດແບບຊາຍແດນ (ຫຼືກ່ຽວຂ້ອງກັບຊາຍແດນ - ດ້ານເທິງ, ຊາຍແດນ - ຂວາ, ດ້ານຊາຍແດນແລະດ້ານລຸ່ມ) ເພື່ອໃຫ້ມີເສັ້ນຂອບ:
iframe {
border-top: # c00 1px dotted;
border-right: # c00 2px dotted;
border-left: # c00 2px dotted;
ຂອບດ້ານລຸ່ມ: # c00 4px dotted;
}
ແຕ່ທ່ານບໍ່ຄວນຢຸດກັບເລື່ອນແລະຂອບສໍາລັບຮູບແບບຂອງທ່ານ. ທ່ານສາມາດສະຫມັກຂໍເອົາແບບ CSS ຫຼາຍໆຢ່າງໃນ iframe ຂອງທ່ານ. ຕົວຢ່າງນີ້ໃຊ້ຄໍເຕົ້າໄຂ່ທີ່ CSS3 ເພື່ອໃຫ້ iframe ເງົາ, ມຸມກົມແລະ rotate ມັນ 20 ອົງສາ.
iframe {
margin-top: 20px
ຂອບຮ່າງ: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-transform: rotate (20deg);
-ms-transform: rotate (20deg);
ຕົວກອງ: progid: DXImageTransformMicrosoftBasicImage (rotation = 2)
}
Styling the Iframe Contents
ການກໍານົດເນື້ອໃນຂອງ iframe ແມ່ນຄ້າຍຄືກັບການອອກແບບເວັບໄຊທ໌ອື່ນໆ. ແຕ່, ທ່ານ ຕ້ອງມີການເຂົ້າເຖິງການດັດແກ້ຫນ້າ . ຖ້າທ່ານບໍ່ສາມາດແກ້ໄຂຫນ້າ (ຕົວຢ່າງມັນຢູ່ໃນເວັບໄຊອື່ນ).
ຖ້າທ່ານສາມາດດັດແກ້ຫນ້າ, ທ່ານສາມາດເພີ່ມ ເອກະສານແບບເອກະສານພາຍນອກ ຫຼື ຄໍເຕົ້າໄຂ່ທີ່ເຫມາະສົມໃນເອກະສານ ເຊັ່ນດຽວກັນກັບທ່ານຈະລົງຮູບແບບເວັບໄຊທ໌ອື່ນໃນເວັບໄຊທ໌ຂອງທ່ານ.