การผลิตหน้าเว็บ: ใช้ div+css เพื่อจำลองเส้นทแยงมุมของตาราง

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-12 17:24:05

บางครั้งเมื่อแทรกเอกสาร จะต้องใช้เส้นทแยงมุมของตาราง วิธีทั่วไปคือการใช้รูปภาพเพื่อประมวลผล และยังมีการใช้ vml เพื่อวาดเส้นทแยงมุมด้วย คำตอบคือใช่ มาจำลองเส้นทแยงมุมของตารางกัน

ใช้เส้นขอบเพื่อจำลองเส้นทแยงมุม เรารู้ว่าหากเส้นขอบของ DIV มีความกว้างเพียงพอและมีการกำหนดสีที่ต่างกัน จุดตัดของเส้นขอบสองเส้นที่อยู่ติดกันจะเป็นเส้นทแยงมุม เมื่อทราบหลักการนี้แล้ว เราสามารถใช้ border-left และ border-top เพื่อจำลองผลกระทบของเครื่องหมายทับได้

เรามาสร้างโครงสร้างกันก่อน:
<ระดับ div="ออก">
หมวดหมู่
ชื่อ

เราใช้

เป็นคอนเทนเนอร์แนวทแยง และเราตั้งค่าสไตล์สแลชเป็นดังนี้:
.ออก{
border-top:40px #D6D3D6 solid;/*ความกว้างของเส้นขอบด้านบนเท่ากับความสูงของแถวแรกของตาราง*/
width:0px;/*ให้ความกว้างของคอนเทนเนอร์เป็น 0*/
height:0px;/*ให้ความสูงของคอนเทนเนอร์เป็น 0*/
border-left:80px #BDBABD solid;/*ความกว้างของเส้นขอบด้านซ้ายเท่ากับความกว้างของเซลล์แรกในแถวแรกของตาราง*/
position:relative;/*ทำให้คอนเทนเนอร์ย่อยทั้งสองอยู่ภายในตำแหน่งที่แน่นอน*/
}

และ แท็กถูกใช้เพื่อตั้งค่าสองหมวดหมู่ และตั้งค่าให้บล็อกโครงสร้างตามลำดับ display:block; clear font style:normal; เนื่องจากคอนเทนเนอร์หลักได้ตั้งค่าตำแหน่งที่สัมพันธ์กัน ดังนั้นให้ตั้งค่า เป็นตำแหน่งที่แน่นอน เพื่อให้คุณสามารถชดเชยตำแหน่งที่คุณต้องการระบุได้

b{แบบอักษร:ปกติ;จอแสดงผล:บล็อก;ตำแหน่ง:สัมบูรณ์;ด้านบน:-40px;ซ้าย:-40px;ความกว้าง:35px;}
em {แบบอักษร: ปกติ; จอแสดงผล: บล็อก; ตำแหน่ง: สัมบูรณ์; ด้านบน: -25px; ซ้าย: -70px; ความกว้าง: 55x;}

เส้นทแยงมุมดังกล่าวถูกจำลองขึ้น ถ้ารู้หลักการก็สามารถเปลี่ยนเป็นเรื่องที่น่าสนใจได้หลายอย่างครับ ขอให้โชคดี!

ข้อเสียของวิธีการจำลองแนวทแยงนี้:

1. ต้องทราบความกว้างและความสูง
2. ความยาว
ของ

ความกว้างและความสูงต้องไม่แตกต่างกันมากเกินไป คุณสามารถลองทำความกว้างให้ยาวกว่าความสูงได้หลายครั้งจึงจะเห็นผล

นอกจากนี้ ไม่สามารถตั้งค่าสีของเส้นทแยงมุมได้

หมายเหตุอีกประการหนึ่ง: โค้ดด้านบนทดสอบเฉพาะ ie6 และ ff3 และเบราว์เซอร์อื่นๆ ไม่ได้ทดสอบ