ในบทความสามชุดก่อนหน้านี้ ฉันได้ให้ข้อมูลเบื้องต้นโดยละเอียดเกี่ยวกับเค้าโครงตารางเก้าตาราง เริ่มจากเค้าโครงพื้นฐานและอธิบายปัญหาที่พบในระหว่างกระบวนการผลิตทีละรายการ ทั้งสามบทความนี้เป็นคำอธิบายถึงหลักการพื้นฐานทั้งหมด ไม่มีกรณีใดที่จะพิสูจน์ได้ว่าหลักการนี้ถูกต้องหรือไม่ ดังนั้นในบทความนี้ผมจะมาแนะนำกรณีของ Jiugongge ซึ่งเป็นผู้เล่นที่เจ๋งมาก
ในบทความที่สามของฉัน "The Perfect Nine-Gong Grid with Three Layers of Separation" ฉันแนะนำให้ใช้ JS เพื่อห่อหุ้มแท็ก html เพื่อลดโครงสร้างที่ซ้ำซ้อน แต่วิธีนี้ก็มีข้อบกพร่องเช่นกัน หากผู้ใช้ปิดการใช้งาน JS สิ่งนี้จะทำให้โครงสร้างเป็น ไม่สามารถแสดงได้เลย แน่นอนว่า สำหรับสภาพอินเทอร์เน็ตในปัจจุบันนี้ไม่น่าจะเป็นปัญหาใหญ่ แต่เมื่อพิจารณาถึงการออกแบบหน้าเว็บต่างประเทศบางหน้า การพิจารณาเรื่องนี้ก็เป็นสิ่งจำเป็น สิ่งนี้ต้องการการปรับลดรุ่นอย่างสง่างามและการลดการทำงานลง แต่ผลลัพธ์ก็เหมือนกับการไม่ใช้ JS encapsulation ดังนั้นคุณไม่สามารถกินเค้กและกินมันได้เช่นกัน เฮ้ ทั้งหมดนี้เป็นเพียงการพูดนอกเรื่อง มาดูกันว่าหนึ่งในผู้เล่นสุดเจ๋งของเราได้รับการออกแบบอย่างไร!
การแสดงครั้งแรกต้องมาก่อน ทุกคนต้องการเห็นผลลัพธ์ก่อน โอเค มาแสดงภาพหน้าจอกันก่อน:
รูปที่ 1
โดยทั่วไปแล้ว สำหรับเครื่องเล่นที่มีสีสันดังกล่าว จำเป็นต้องปรับค่าความกว้างและความสูงแบบไดนามิก ดังนั้นจึงเป็นตัวเลือกที่เหมาะสมมากในการใช้ตารางเก้าตารางสำหรับกราฟิกดังกล่าว
แน่นอนว่าฉันจะไม่ย้ำหลักการนี้อีกต่อไป โปรดดู " เค้าโครงตารางเก้าฆ้องที่ไม่มีวันแตกหัก " ในบทความชุดนี้ แน่นอนว่ายังมีเทคนิคบางอย่างในการผลิตที่สามารถช่วยให้เราทำงานให้สำเร็จได้ดีขึ้น ตัวอย่างเช่น เทคโนโลยี css sprites (คุณสามารถดูบทความอื่น ๆ ของฉัน " เทคโนโลยีการเพิ่มประสิทธิภาพพื้นหลังรูปภาพ css sprites ") สามารถลดจำนวนคำขอรูปภาพลงได้ โดยทั่วไปแล้ว สำหรับแอปพลิเคชันที่มีเค้าโครงตารางเก้าตาราง จะมีรูปภาพมากกว่า เนื่องจาก ต้องใช้รูปภาพอย่างน้อยแปดภาพเพื่อตกแต่งมุมทั้งสี่และทั้งสี่ด้าน ดังนั้นวิธีลดจำนวนภาพจึงเป็นสิ่งที่นักออกแบบต้องคำนึงถึง
ในตัวอย่างนี้ ฉันรวมรูปภาพทั้งสี่มุมให้เป็นรูปภาพเดียว ดังนั้นรูปภาพเหล่านั้นจึงควรมีลักษณะดังนี้:
รูปที่ 2
ในภาพด้านบน เพื่อให้ทุกคนมองเห็นได้ละเอียดยิ่งขึ้น ฉันจึงวาดจุดเชื่อมต่อของรูปภาพหลายๆ ภาพด้วยเส้นเสริม เราใช้หลักการวางตำแหน่งรูปภาพเพื่อแก้ไขมุมทั้งสี่ มีการกำหนดไว้ในสไตล์ชีตดังนี้:
.t_l{ พื้นหลัง:url(../image/round.gif) ไม่ทำซ้ำด้านบนซ้าย;}
/*มุมซ้ายบน*/
.t_r{พื้นหลัง:url(../image/round.gif) ไม่ทำซ้ำด้านบนขวา;}
/*มุมขวาบน*/
.b_l{พื้นหลัง:url(../image/round.gif) ไม่ทำซ้ำด้านล่างซ้าย;}
/*มุมซ้ายล่าง*/
.b_r{ พื้นหลัง:url(../image/round.gif) ไม่ทำซ้ำด้านล่างขวา;}
/*มุมขวาล่าง*/