ເຮັດໃຫ້ເສັ້ນເບິ່ງທີ່ຫນ້າສົນໃຈໃນຫນ້າເວັບທີ່ມີລະຫັດ HR
ຖ້າທ່ານຕ້ອງການເພີ່ມເສັ້ນທາງແບບແຍກຕາມເສັ້ນທາງແບບແຍກຕາມເສັ້ນທາງໄປຫາເວັບໄຊທ໌ຂອງທ່ານ, ທ່ານມີທາງເລືອກຫຼາຍຢ່າງ. ທ່ານສາມາດເພີ່ມໄຟລ໌ຮູບພາບທີ່ແທ້ຈິງຂອງເສັ້ນເຫຼົ່ານັ້ນໃຫ້ກັບຫນ້າຂອງທ່ານ, ແຕ່ວ່າມັນຕ້ອງການໃຫ້ຕົວທ່ອງເວັບຂອງທ່ານດຶງດູດແລະໂຫຼດໄຟລ໌ເຫຼົ່ານັ້ນ, ເຊິ່ງອາດມີຜົນກະທົບທາງລົບຕໍ່ການປະຕິບັດງານຂອງເວັບໄຊທ໌.
ທ່ານສາມາດນໍາໃຊ້ຄຸນສົມບັດຊາຍແດນ CSS ເພື່ອເພີ່ມ ຊາຍແດນ ທີ່ເຮັດຫນ້າທີ່ເປັນເສັ້ນຢູ່ທາງເທິງຫຼືຢູ່ດ້ານລຸ່ມຂອງອົງປະກອບ, ມີການສ້າງເສັ້ນແຍກຂອງທ່ານຢ່າງມີປະສິດທິຜົນ.
ສຸດທ້າຍ, ທ່ານສາມາດນໍາໃຊ້ອົງປະກອບ HTML ສໍາລັບກົດລະບຽບແນວນອນ - ໄດ້
ອົງປະກອບ Rule Horizontal
ຖ້າທ່ານເຄີຍໃສ່ອົງປະກອບຢູ່ໃນຫນ້າເວັບ, ທ່ານກໍ່ອາດຈະພົບວ່າວິທີການແບບເດີມທີ່ເສັ້ນເຫຼົ່ານີ້ຖືກສະແດງບໍ່ເຫມາະສົມ. ນີ້ຫມາຍຄວາມວ່າທ່ານຕ້ອງຫັນໄປຫາ CSS ເພື່ອປັບແຕ່ງຮູບລັກສະນະຂອງອົງປະກອບເຫຼົ່ານີ້ເພື່ອສອດຄ່ອງກັບວິທີທີ່ທ່ານຕ້ອງການເບິ່ງເວັບໄຊທ໌ຂອງທ່ານ.
Tag HR ຂັ້ນພື້ນຖານແມ່ນສະແດງວິທີທີ່ຕົວທ່ອງເວັບຕ້ອງການສະແດງມັນ. ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມໂດຍປົກກະຕິສະແດງ tags HR ທີ່ບໍ່ມີອິດທິພົນທີ່ມີຄວາມກວ້າງຂອງ 100%, ຄວາມສູງ 2px, ແລະຊາຍແດນ 3D ໃນສີດໍາເພື່ອສ້າງເສັ້ນ.
ນີ້ແມ່ນ ຕົວຢ່າງຂອງອົງປະກອບ HR ມາດຕະຖານ ຫຼືທ່ານສາມາດເບິ່ງໃນຮູບພາບນີ້ວິທີທີ່ HR ບໍ່ສະກົດຕົວເບິ່ງໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ.
ຄວາມກວ້າງແລະຄວາມສູງແມ່ນສອດຄ່ອງກັບຕົວທ່ອງເວັບ
ຮູບແບບທີ່ເທົ່າທຽມກັນທີ່ມີຄວາມສອດຄ່ອງໃນທົ່ວຕົວທ່ອງເວັບແມ່ນ ຄວາມກວ້າງ ແລະຮູບແບບ. ເຫຼົ່ານີ້ກໍານົດເສັ້ນຂະຫນາດໃຫຍ່ທີ່ຈະເປັນແນວໃດ. ຖ້າທ່ານບໍ່ກໍານົດຄວາມກວ້າງແລະຄວາມສູງ, width width ຂອງ default ແມ່ນ 100% ແລະຄວາມສູງໃນຕອນຕົ້ນແມ່ນ 2px.
ໃນຕົວຢ່າງນີ້, ຄວາມກວ້າງແມ່ນ 50% ຂອງອົງປະກອບແມ່ (ສັງເກດເຫັນຕົວຢ່າງເຫຼົ່ານີ້ລຸ່ມທັງຫມົດລວມເຖິງຄໍເຕົ້າໄຂ່ໃນເສັ້ນ. ໃນການກໍານົດການຜະລິດ, ຮູບແບບເຫຼົ່ານີ້ຈະຖືກຂຽນໄວ້ໃນເອກະສານສະໄຕພາຍນອກເພື່ອຄວາມງ່າຍໃນການຄຸ້ມຄອງໃນທຸກຫນ້າຂອງທ່ານ):
style = "width: 50%">
ແລະໃນຕົວຢ່າງນີ້, ຄວາມສູງແມ່ນ 2em:
style = "height: 2em">
ການປ່ຽນແປງຊາຍແດນສາມາດທ້າທາຍໄດ້
ໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ, ຕົວທ່ອງເວັບກໍ່ສ້າງເສັ້ນທາງໂດຍດັດແປງຊາຍແດນ. ດັ່ງນັ້ນ, ຖ້າທ່ານເອົາຊາຍແດນທີ່ມີຄຸນສົມບັດແບບ, ເສັ້ນຈະຫາຍໄປໃນຫນ້າ. ຕາມທີ່ທ່ານສາມາດເບິ່ງ (ດີ, ທ່ານຈະບໍ່ເຫັນຫຍັງ, ເພາະວ່າສາຍຈະເບິ່ງບໍ່ເຫັນ) ໃນຕົວຢ່າງນີ້:
style = "border: none">
ການປັບຂະຫນາດ, ສີ, ແລະແບບຊາຍແດນຈະເຮັດໃຫ້ເສັ້ນເບິ່ງແຕກຕ່າງກັນແລະມີຜົນດຽວກັນໃນທຸກຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ. ຕົວຢ່າງ, ໃນການສະແດງນີ້ຊາຍແດນແມ່ນສີແດງ, dashed, ແລະກວ້າງ 1px:
style = "border: 1px dashed # 000;">
ແຕ່ຖ້າທ່ານປ່ຽນແປງຊາຍແດນແລະລະດັບຄວາມສູງ, ຄໍເຕົ້າໄຂ່ທີ່ເບິ່ງແຕກຕ່າງກັນເລັກນ້ອຍໃນຕົວທ່ອງເວັບທີ່ມີຄວາມຫຍຸ້ງຍາກຫຼາຍກວ່າທີ່ພວກເຂົາເຮັດໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມ. ດັ່ງທີ່ທ່ານສາມາດເບິ່ງໃນຕົວຢ່າງນີ້, ຖ້າທ່ານເບິ່ງມັນຢູ່ໃນ IE7 ແລະຂ້າງລຸ່ມນີ້ (ຕົວທ່ອງເວັບທີ່ບໍ່ສະບາຍເວລາແລະບໍ່ສະຫນັບສະຫນູນໂດຍ Microsoft), ມີເສັ້ນທາງທີ່ບໍ່ມີຕົວຕົນທີ່ມີຢູ່ໃນຕົວທ່ອງເວັບອື່ນໆ (ລວມທັງ IE8 ແລະ up) :
style = "height: 15em width: 25em border: 1px solid 000 000">
ຕົວທ່ອງເວັບ antiqued ເຫຼົ່ານີ້ແມ່ນບໍ່ມີຄວາມກັງວົນຫຼາຍໃນການອອກແບບເວັບໄຊທ໌໌ໃນມື້ນີ້, ນັບຕັ້ງແຕ່ພວກເຂົາເຈົ້າໄດ້ຖືກທົດແທນໂດຍສ່ວນໃຫຍ່ມີທາງເລືອກທີ່ທັນສະໄຫມຫຼາຍ.
ສ້າງເສັ້ນທາງອອກແບບດ້ວຍຮູບພາບພື້ນຖານ
ແທນທີ່ຈະເປັນສີ, ທ່ານສາມາດກໍານົດພາບພື້ນຫລັງສໍາລັບ HR ຂອງທ່ານເພື່ອໃຫ້ມັນເບິ່ງຄືກັບທີ່ທ່ານຕ້ອງການ, ແຕ່ວ່າມັນຍັງສະແດງຢູ່ໃນລະດັບຂອງທ່ານ.
ໃນຕົວຢ່າງນີ້, ພວກເຮົາໄດ້ນໍາໃຊ້ຮູບພາບທີ່ມີສາມເສັ້ນລຸກ. ໂດຍການຕັ້ງຄ່າມັນເປັນ ຮູບພື້ນຫລັງ ໂດຍບໍ່ມີການເຮັດຊ້ໍາອີກ, ມັນສ້າງຄວາມແຕກແຍກໃນເນື້ອຫາທີ່ຄ້າຍຄືກັບທີ່ທ່ານເຫັນໃນປຶ້ມ:
style = "height: 20px background: #fff url (aa010307gif) no-repeat scroll center; border: none;">
ການຫັນເປັນອົງປະກອບ HR
ດ້ວຍ CSS3, ທ່ານກໍ່ສາມາດເຮັດໃຫ້ເສັ້ນຂອງທ່ານຫນ້າສົນໃຈຫຼາຍ. ອົງປະກອບ HR ແມ່ນປະເພນີ ເສັ້ນແນວນອນ , ແຕ່ດ້ວຍຄຸນລັກສະນະແປງ CSS, ທ່ານສາມາດປ່ຽນແປງວິທີການເບິ່ງໄດ້. ການຫັນປ່ຽນທີ່ຊື່ນຊອບໃນອົງປະກອບ HR ແມ່ນການປ່ຽນແປງການຫມຸນວຽນ.
ທ່ານສາມາດ rotate ອົງປະກອບ HR ຂອງທ່ານເພື່ອວ່າມັນພຽງແຕ່ຂວາງຂວາ:
hr {
-moz-transform: rotate (10deg);
-webkit-transform: rotate (10deg);
-o-transform: rotate (10deg);
-ms-transform: rotate (10deg);
ປ່ຽນແປງ: rotate (10deg);
}
ຫຼືທ່ານສາມາດ rotate ມັນເພື່ອວ່າມັນເປັນແນວຕັ້ງ:
hr {
-moz-transform: rotate (90deg);
-webkit-transform: rotate (90deg);
-o-transform: rotate (90deg);
-ms-transform: rotate (90deg);
ປ່ຽນແປງ: rotate (90deg);
}
ຈົ່ງຈື່ໄວ້ວ່ານີ້ຈະຫມຸນ HR ໂດຍອີງໃສ່ສະຖານທີ່ປະຈຸບັນຂອງມັນຢູ່ໃນເອກະສານ, ດັ່ງນັ້ນທ່ານອາດຈະຕ້ອງປັບຕໍາແຫນ່ງເພື່ອໃຫ້ມັນມີບ່ອນທີ່ທ່ານຕ້ອງການ. ມັນບໍ່ໄດ້ແນະນໍາໃຫ້ນໍາໃຊ້ນີ້ເພື່ອເພີ່ມເສັ້ນຕັ້ງໄປສູ່ການອອກແບບແຕ່ມັນເປັນວິທີທີ່ຈະໄດ້ຜົນທີ່ຫນ້າສົນໃຈ.
ວິທີອື່ນເພື່ອໃຫ້ເສັ້ນທາງໃນຫນ້າຂອງທ່ານ
ສິ່ງຫນຶ່ງທີ່ຄົນບາງຄົນເຮັດແທນທີ່ຈະນໍາໃຊ້ອົງປະກອບ HR ແມ່ນອີງໃສ່ຂອບຂອງອົງປະກອບອື່ນໆ. ແຕ່ບາງຄັ້ງ HR ແມ່ນມີຄວາມສະດວກຫຼາຍແລະງ່າຍຕໍ່ການນໍາໃຊ້ກ່ວາຄວາມພະຍາຍາມທີ່ຈະສ້າງຂອບເຂດ. ບັນຫາແບບຈໍາລອງກ່ອງຂອງຕົວທ່ອງເວັບບາງຄົນສາມາດເຮັດໃຫ້ການສ້າງຕັ້ງຊາຍແດນເຖິງແມ່ນ trickier.