สร้างบรรทัดที่น่าสนใจบนหน้าเว็บที่มีแท็ก HR
หากต้องการเพิ่มเส้นแนวนอนในเว็บไซต์ของคุณคุณมีทางเลือกไม่กี่รายการ คุณสามารถเพิ่มไฟล์ภาพที่แท้จริงของบรรทัดเหล่านั้นลงในหน้าเว็บของคุณได้ แต่จะต้องใช้เบราว์เซอร์ของคุณเพื่อเรียกค้นและโหลดไฟล์เหล่านี้ซึ่งอาจมีผลเสียต่อประสิทธิภาพไซต์
คุณสามารถใช้คุณสมบัติชายแดน CSS เพื่อเพิ่ม เส้นขอบ ที่ทำหน้าที่เป็นเส้นที่ด้านบนหรือด้านล่างขององค์ประกอบได้อย่างมีประสิทธิภาพสร้างเส้นแบ่งของคุณ
สุดท้ายคุณสามารถใช้องค์ประกอบ HTML สำหรับกฎแนวนอนได้ -
องค์ประกอบกฎแนวนอน
ถ้าคุณเคยวางองค์ประกอบบนหน้าเว็บคุณอาจพบว่าวิธีการเริ่มต้นที่บรรทัดเหล่านี้แสดงขึ้นไม่เหมาะ ซึ่งหมายความว่าคุณต้องเปลี่ยนเป็น CSS เพื่อปรับลักษณะที่ปรากฏขององค์ประกอบเหล่านี้ให้สอดคล้องกับลักษณะที่คุณต้องการให้ไซต์ของคุณดู
แท็ก HR พื้นฐานจะแสดงวิธีที่เบราเซอร์ต้องการจะแสดง เบราว์เซอร์สมัยใหม่มักจะแสดงแท็ก HR ที่ยังไม่ย่อโดยมีความกว้าง 100% ความสูง 2px และเส้นขอบ 3 มิติเป็นสีดำเพื่อสร้างเส้น
นี่คือ ตัวอย่างขององค์ประกอบ HR มาตรฐาน หรือคุณสามารถมองเห็นภาพนี้ว่าเบราว์เซอร์สมัยใหม่มีลักษณะงานที่ยังไม่ย่อเท่าไร
ความกว้างและความสูงตรงข้ามกับเบราว์เซอร์
รูปแบบเฉพาะที่สอดคล้องกันในเว็บเบราเซอร์คือ ความกว้าง และรูปแบบ เหล่านี้กำหนดขนาดเส้นจะเป็นอย่างไร หากคุณไม่ได้กำหนดความกว้างและความสูงความกว้างเริ่มต้นคือ 100% และความสูงเริ่มต้นคือ 2px
ในตัวอย่างนี้ความกว้างคือ 50% ขององค์ประกอบหลัก (โปรดสังเกตตัวอย่างด้านล่างนี้ทั้งหมดรวมถึงสไตล์แบบอินไลน์ในการตั้งค่าการผลิตรูปแบบเหล่านี้จะถูกเขียนลงในสไตล์ชีตภายนอกเพื่อความสะดวกในการจัดการตลอดทุกหน้าของคุณ):
style = "width: 50%;">
และในตัวอย่างนี้ความสูงคือ 2em:
style = "height: 2em;">
การเปลี่ยนพรมแดนอาจเป็นเรื่องที่ท้าทาย
ในเบราว์เซอร์รุ่นใหม่เบราว์เซอร์จะสร้างเส้นโดยการปรับเส้นขอบ ถ้าคุณลบเส้นขอบด้วยคุณสมบัติสไตล์เส้นจะหายไปในหน้า อย่างที่คุณเห็น (ดีคุณจะไม่เห็นอะไรเช่นบรรทัดจะมองไม่เห็น) ในตัวอย่างนี้:
style = "border: none;">
การปรับขนาดเส้นขอบสีและลักษณะจะทำให้เส้นมีลักษณะแตกต่างออกไปและมีผลเหมือนกันในเบราว์เซอร์ที่ทันสมัยทั้งหมด ตัวอย่างเช่นในการสาธิตนี้เส้นขอบเป็นสีแดงเส้นประและกว้าง 1px:
style = "border: 1px dashed # 000;">
แต่ถ้าคุณเปลี่ยนเส้นขอบและความสูงลักษณะจะแตกต่างกันเล็กน้อยในเบราว์เซอร์ที่ล้าสมัยมากไปกว่าเบราว์เซอร์สมัยใหม่ ดังที่คุณเห็นในตัวอย่างนี้ถ้าคุณดูใน IE7 และด้านล่าง (เบราว์เซอร์ซึ่งล้าสมัยแล้วและไม่ได้รับการสนับสนุนจาก Microsoft) มีเส้นภายในที่ไม่แสดงในเบราว์เซอร์อื่น ๆ (รวมถึง IE8 ขึ้นไป) :
style = "height: 1.5em; width: 25em; border: 1px solid # 000;">
เบราว์เซอร์รุ่นเก่าเหล่านี้ไม่ค่อยมีความกังวลในการออกแบบเว็บในปัจจุบันเนื่องจากถูกแทนที่ด้วยตัวเลือกที่ทันสมัยมากขึ้น
สร้างบรรทัดตกแต่งด้วยภาพพื้นหลัง
แทนที่จะเป็นสีคุณสามารถกำหนดรูปพื้นหลังสำหรับ HR ของคุณเพื่อให้ตรงกับที่คุณต้องการ แต่ยังคงแสดงความหมายในมาร์กอัพของคุณ
ในตัวอย่างนี้เราใช้ภาพที่มีเส้นหยักสามเส้น การตั้งค่าเป็น ภาพพื้นหลัง โดยไม่มีการทำซ้ำทำให้เกิดข้อผิดพลาดในเนื้อหาที่ดูคล้ายกับที่คุณเห็นในหนังสือ:
style = "height: 20px; background: #fff url (aa010307.gif) ไม่มีศูนย์เลื่อนซ้ำ; border: none;">
การเปลี่ยนองค์ประกอบด้านทรัพยากรบุคคล
ด้วย CSS3 คุณสามารถทำให้เส้นของคุณน่าสนใจยิ่งขึ้น องค์ประกอบ HR เป็นแบบ แนวนอน แต่ด้วยคุณสมบัติการแปลง CSS คุณสามารถเปลี่ยนลักษณะที่ปรากฏได้ การเปลี่ยนแปลงที่น่าสนใจในองค์ประกอบ HR คือการเปลี่ยนการหมุน
คุณสามารถหมุนองค์ประกอบ HR ของคุณเพื่อให้เป็นเส้นทแยงมุมเล็กน้อย:
hr {
-moz- แปลง: หมุน (10deg);
- เว็บเบราว์เซอร์แปลง: หมุน (10deg);
-o-transform: หมุน (10deg);
-ms- แปลง: หมุน (10deg);
แปลง: หมุน (10deg);
}
หรือคุณสามารถหมุนได้เพื่อให้แนวตั้งสมบูรณ์:
hr {
-moz- แปลง: หมุน (90deg);
- เว็บเบราว์เซอร์แปลง: หมุน (90deg);
-o-transform: หมุน (90deg);
-ms- แปลง: หมุน (90deg);
แปลง: หมุน (90deg);
}
โปรดจำไว้ว่าการหมุน HR นี้ขึ้นอยู่กับตำแหน่งปัจจุบันในเอกสารดังนั้นคุณอาจต้องปรับตำแหน่งเพื่อให้ได้ตำแหน่งที่คุณต้องการ ไม่แนะนำให้ใช้วิธีนี้เพื่อเพิ่มเส้นแนวตั้งให้กับการออกแบบ แต่เป็นวิธีที่จะทำให้ได้ผลลัพธ์ที่น่าสนใจ
อีกวิธีหนึ่งในการรับเส้นบนหน้าเว็บของคุณ
สิ่งหนึ่งที่บางคนทำแทนการใช้องค์ประกอบทรัพยากรบุคคลคือการพึ่งพาเส้นขอบขององค์ประกอบอื่น ๆ แต่บางครั้งทรัพยากรบุคคลมีความสะดวกและใช้งานง่ายกว่าการตั้งค่าขอบเขต ปัญหาเกี่ยวกับรูปแบบกล่องของเบราว์เซอร์บางประเภทอาจทำให้การตั้งค่าเส้นขอบทำได้ยากขึ้น