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