في برنامجي التعليمي السابق " The Unbreakable Nine-Gong Grid Layout "، قدمت طريقة مثالية نسبيًا لتخطيط الشبكة المكونة من تسعة مربعات، والتي يمكنها ضبط عرضها وارتفاعها بمرونة كاملة لتحقيق نمط تخطيط أكثر مرونة.
ومع ذلك، من أجل عكس الوظيفة المرنة بشكل مثالي، لا يزال السعر المدفوع باهظًا للغاية من الناحية الهيكلية، فإن الهيكل منتفخ نسبيًا، ولكن كل عقدة لا غنى عنها ولا يمكن تبسيطها، وإلا فإنها ستؤدي إلى مرونتها. لا يكفي.
في التطبيقات العملية، قد لا يحب العديد من المصممين بنية التخطيط هذه ويعتقدون أنها زائدة عن الحاجة.
يجب أن يكون التصميم المثالي للشبكة المربعة التسعة عبارة عن هيكل منفصل مكون من ثلاث طبقات. يجب أن تكون الشبكة المثالية المكونة من تسعة مربعات التي أريد تحقيقها كما يلي:
لذلك، في هذه المقالة، سأحاول تقريب هذا التخطيط من هذه الحالة المثالية قدر الإمكان، مما يجعله أكثر ملاءمة للتطبيق في جوانب مختلفة.
فيما يتعلق بالنقطتين الأولى والثانية، إذا كنت ترغب في الحفاظ على مرونتها وتحقيق تأثير مبسط، أي إذا كنت تريد "الحصول على كعكتك وتناولها أيضًا"، فلا توجد طريقة أخرى سوى استخدام تغليف js. يمكنك القول أن هذا نوع من أسلوب "إخفاء الأذنين وسرقة الجرس". نعم، يجب أن أعترف أن طريقة التغليف هذه في JS لا تبسط بنيتها في جوهرها، ولكنها تستخدم فقط طريقة ديناميكية لتغليفها. إنشاء، ولكن لها تأثير فوري على هياكل HTML الزائدة عن الحاجة، وجميع الهياكل الزائدة عن الحاجة غير مرئية في ضربة واحدة.
دعونا نتعلم كيفية تحسين شبكتنا ذات المربعات التسعة من خلال أسلوب الفصل ثلاثي الطبقات.
الطبقة الهيكلية :
هذا هو المجال الرئيسي الذي نريد تبسيطه قدر الإمكان. نستخدم js لإنشاء هيكله ديناميكيًا، لذلك يجب أن يكون الهيكل الحالي هو الهيكل الأكثر أصالة على النحو التالي:
المربع الأول ذو التسعة مربعات
المربع الثاني ذو التسعة مربعات
المربع الثالث ذو تسعة مربعات
كان التعديل الوحيد الذي أجريته هو إضافة معرف مختلف لكل مربع، مما يترك خطافًا لاستدعاء ورقة الأنماط من أجل إنشاء ألوان مختلفة لاحقًا. استخدم هذا المعرف لإنشاء صور أو أنماط ألوان مختلفة في ورقة الأنماط.
يجب علينا فقط إضافة فئة = "مربع" إلى حاوية div، وسيتم إنشاء تخطيط الشبكة المكون من تسعة مربعات بنجاح. هذا بسيط بما فيه الكفاية!
طبقة النمط:
لقد قمنا الآن بدفن نقطة الاختراق المتمثلة في تخصيص النمط (المعرف المختلف) في طبقة البنية، بحيث تصبح كتابة النمط أسهل. نقوم بتجاوز وإعادة تعيين أنماط جميع الأماكن التسعة حيث يحتاج النمط إلى التغيير للحصول على أنماط مختلفة.
بالطبع، يمكنك تطبيق صور مختلفة على الخلفية كخلفية لها، وقد قمت للتو بتسمية قيمة اللون لسهولة العرض. يعتمد نمط الواجهة المحدد على مهاراتك في التصميم.
/*نظام الألوان الأول*/
#واحد .t_l{الخلفية:أزرق؛}
#واحد .t_r{الخلفية:أزرق؛}
#واحد .t_m{الخلفية:برتقالي؛}
#واحد .m_l{خلفية:برتقالي;}
#واحد .m_r{الخلفية:برتقالي؛}
#واحد .b_l{الخلفية:أزرق؛}
#واحد .b_r{الخلفية:أزرق؛}
#واحد .b_m سبان{خلفية:برتقالي;}
#واحد .السياق{الخلفية:#666;}
/*نظام الألوان الثاني*/
#اثنين .t_l{الخلفية:أحمر؛}
#اثنين .t_r{الخلفية:أحمر؛}
#اثنين .t_m{الخلفية:أسود؛}
#two .m_l{الخلفية:أسود;}
#اثنين .m_r{الخلفية:أسود؛}
#اثنين .b_l{الخلفية:أحمر؛}
#اثنين .b_r{الخلفية:أحمر؛}
#اثنان .b_m تمتد{الخلفية:أسود؛}
#اثنان .السياق{الخلفية:#999;}