ในบทช่วยสอนก่อนหน้าของฉัน " เค้าโครงตารางเก้าฆ้องที่ไม่แตกหัก " ฉันได้แนะนำวิธีเค้าโครงตารางเก้าสี่เหลี่ยมที่ค่อนข้างสมบูรณ์แบบ ซึ่งสามารถปรับความกว้างและความสูงได้อย่างยืดหยุ่นอย่างเต็มที่เพื่อให้ได้สไตล์เค้าโครงที่ยืดหยุ่นมากขึ้น
อย่างไรก็ตาม เพื่อให้สะท้อนถึงฟังก์ชั่นยืดหยุ่นได้อย่างสมบูรณ์แบบ ราคาที่จ่ายไปยังคงหนักมาก จากมุมมองเชิงโครงสร้าง โครงสร้างค่อนข้างจะป่อง แต่แต่ละโหนดนั้นขาดไม่ได้และไม่สามารถปรับปรุงให้มีประสิทธิภาพได้ มิฉะนั้นจะนำไปสู่ความยืดหยุ่น ไม่เพียงพอ
ในการใช้งานจริง นักออกแบบหลายคนอาจไม่ชอบโครงสร้างเค้าโครงนี้และคิดว่ามันซ้ำซ้อน
การออกแบบตารางเก้าตารางที่สมบูรณ์แบบควรเป็นโครงสร้างสามชั้นที่แยกจากกัน ตารางเก้าตารางในอุดมคติที่ฉันต้องการบรรลุควรเป็นดังนี้:
ดังนั้นในบทความนี้ ผมจะพยายามนำเลย์เอาต์นี้ให้ใกล้เคียงกับสภาพอุดมคตินี้ให้มากที่สุด เพื่อให้เหมาะกับการใช้งานในด้านต่างๆ มากขึ้น
เกี่ยวกับประเด็นที่หนึ่งและสอง หากคุณต้องการรักษาความยืดหยุ่นและบรรลุผลที่คล่องตัว กล่าวคือ หากคุณต้องการ "กินเค้กและกินมันด้วย" ไม่มีวิธีอื่นนอกจากการใช้ js encapsulation คุณสามารถพูดได้ว่านี่เป็นวิธีการ "ซ่อนหูและขโมยกระดิ่ง" ใช่ฉันต้องยอมรับว่าวิธีการห่อหุ้มด้วย JS นี้ไม่ได้ทำให้โครงสร้างของมันง่ายขึ้นในสาระสำคัญ แต่ใช้วิธีแบบไดนามิกในการห่อหุ้มเท่านั้น สร้าง แต่จะมีผลทันทีกับโครงสร้าง html ที่ซ้ำซ้อน และโครงสร้างที่ซ้ำซ้อนทั้งหมดจะมองไม่เห็นในคราวเดียว
มาเรียนรู้วิธีปรับปรุงตารางเก้าตารางของเราจากวิธีการแยกสามชั้นกัน
ชั้นโครงสร้าง :
นี่คือส่วนสำคัญที่เราต้องการปรับปรุงให้มากที่สุด เราใช้ js เพื่อสร้างโครงสร้างแบบไดนามิก ดังนั้นโครงสร้างปัจจุบันจึงควรเป็นโครงสร้างดั้งเดิมที่สุดดังนี้:
<div class="box">กล่องเก้าสี่เหลี่ยมแรก</div>
<div class="box" id="one">กล่องเก้าสี่เหลี่ยมอันที่สอง</div>
<div class="box" id="two">กล่องเก้าสี่เหลี่ยมอันที่สาม</div>
การแก้ไขเดียวที่ฉันทำคือการเพิ่ม ID ที่แตกต่างกันลงในแต่ละกล่อง ซึ่งจะทำให้สไตล์ชีตต้องเรียกใช้เพื่อสร้างสีที่แตกต่างกันในภายหลัง ใช้ ID นี้เพื่อสร้างรูปภาพหรือสไตล์สีที่แตกต่างกันในสไตล์ชีต
เราควรจะเพิ่ม class="box" ลงในคอนเทนเนอร์ div เท่านั้น และเค้าโครงตารางเก้าตารางจะถูกสร้างขึ้นได้สำเร็จ ง่ายพอแล้ว!
เลเยอร์สไตล์:
ตอนนี้เราได้ฝังจุดความก้าวหน้าในการปรับแต่งสไตล์ (ID ที่แตกต่างกัน) ไว้ในเลเยอร์โครงสร้าง ดังนั้นจึงง่ายต่อการเขียนสไตล์ เราแทนที่และรีเซ็ตสไตล์ของสถานที่ทั้งเก้าแห่งซึ่งจำเป็นต้องเปลี่ยนสไตล์เพื่อให้ได้สไตล์ที่แตกต่างกัน
แน่นอน คุณสามารถใช้รูปภาพต่างๆ กับพื้นหลังเป็นพื้นหลังได้ ฉันเพิ่งเรียกค่าสีเพื่อความสะดวกในการสาธิต
/*โทนสีหนึ่ง*/
#one .t_l{พื้นหลัง:สีน้ำเงิน;}
#one .t_r{พื้นหลัง:สีน้ำเงิน;}
#one .t_m{พื้นหลัง:สีส้ม;}
#one .m_l{พื้นหลัง:สีส้ม;}
#one .m_r{พื้นหลัง:สีส้ม;}
#one .b_l{พื้นหลัง:สีน้ำเงิน;}
#one .b_r{พื้นหลัง:สีน้ำเงิน;}
#one .b_m ขยาย {พื้นหลัง: ส้ม;}
#one .บริบท{พื้นหลัง:#666;}
/*โทนสีสอง*/
#two .t_l{พื้นหลัง:สีแดง;}
#two .t_r{พื้นหลัง:สีแดง;}
#two .t_m{พื้นหลัง:สีดำ;}
#two .m_l{พื้นหลัง:สีดำ;}
#two .m_r{พื้นหลัง:สีดำ;}
#two .b_l{พื้นหลัง:สีแดง;}
#two .b_r{พื้นหลัง:สีแดง;}
#two .b_m ช่วง {พื้นหลัง: สีดำ;}
#สอง .บริบท{พื้นหลัง:#999;}