เค้าโครงพื้นฐานของตารางเก้าตาราง

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-07-01 17:16:47

ตารางเก้าตารางเป็นการออกแบบที่ค่อนข้างเก่า ประสิทธิภาพขั้นพื้นฐานที่สุดของมันก็เหมือนกับตารางที่มีสามแถวและสามคอลัมน์ ในความเป็นจริง เดิมทีมีการใช้โครงสร้าง C/S ของหน้าต่างมากกว่า ตัวอย่างเช่น เรามักจะเห็นแบบฟอร์มในซอฟต์แวร์ ซึ่งจริงๆ แล้วเป็นแอปพลิเคชันทั่วไปของตารางเก้าตาราง ในแปดทิศทาง ดังนั้นในเทคโนโลยีนี้จึงใช้กันอย่างแพร่หลายในซอฟต์แวร์ C/S สำหรับการออกแบบเค้าโครง ในสังคมปัจจุบันที่ระบบ B/S ได้รับความนิยม นักออกแบบเว็บไซต์บางคนจะค่อยๆ ใช้เลย์เอาต์นี้ในหน้าเว็บ โดยเลย์เอาต์ที่ใช้กันมากที่สุดคือเลย์เอาต์กล่องมุมโค้งมน

รูปภาพต่อไปนี้แสดงโครงร่างพื้นฐานของ Nine Palace Grid:

ดังที่เห็นจากภาพด้านบน แต่ละแถวจะมีสามคอลัมน์ โดยที่สี่เหลี่ยมสีน้ำเงินคือมุมบน สี่บล็อกนี้เป็นพื้นที่ที่มีความกว้างและความสูงคงที่ และสี่พื้นที่สีเหลืองคือสี่ด้านซึ่งจะเป็นแนวนอน หรือปูกระเบื้องแนวตั้ง ในขณะที่พื้นที่สีส้มตรงกลางเป็นพื้นที่หลักในการโหลดเนื้อหา

โครงสร้างประเภทนี้เอื้อต่อการขยายความกว้างและความสูงของพื้นที่เนื้อหาโดยอัตโนมัติตามความละเอียดหน้าจอที่แตกต่างกัน โครงสร้างประเภทนี้ยังเป็นโครงสร้างเค้าโครงที่นักออกแบบเว็บไซต์ต้องการมากที่สุด ซึ่งมีความยืดหยุ่นและเงียบสงบ

มาปรับใช้กันด้านล่าง:

ชั้นโครงสร้าง :

เนื่องจากต้องปรับตัวให้ยืดออกไป 8 ทิศทาง แต่ละทิศทางจึงมี div ขาดไป ความยืดหยุ่นก็จะไม่เพียงพอ จากนั้นตามหลักการนี้เราจะได้โครงสร้างดังนี้

เลเยอร์สไตล์ :

ตามโครงสร้างเราสามารถเขียนรูปแบบพื้นฐานได้ หลักการใช้งานขั้นพื้นฐานคือการตั้งค่า Total Container.box ให้อยู่ในตำแหน่งที่สัมพันธ์กันและตั้งค่า Overflow:hidden เพื่อให้พื้นที่ทั้งหมดที่อยู่นอกเหนือจากนั้นถูกตัดออก และ div ในแปดทิศทางภายในนั้นจะถูกตั้งค่าเป็นตำแหน่งที่แน่นอน และ z - ดัชนีถูกตั้งค่าเป็น 2 จากนั้นคอนเทนเนอร์มุมทั้งสี่จะถูกตั้งค่าเป็นมุมทั้งสี่ตามลำดับ

.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {ตำแหน่ง:สัมบูรณ์;z-ดัชนี:2;}

<ระดับ div="กล่อง">
<div class="t_l"></div>
<div class="t_m"></div>
<div class="t_r"></div>