หน้าแรก>การสอนการออกแบบเว็บไซต์>บทช่วยสอน CSS

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

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


เราใช้

เป็นคอนเทนเนอร์แนวทแยง และเราตั้งค่าสไตล์สแลชเป็นดังนี้:
.ออก{
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 และเบราว์เซอร์อื่นๆ ไม่ได้ทดสอบ