تعد الشبكة ذات المربعات التسعة تصميمًا قديمًا نسبيًا، وأداءها الأساسي يشبه في الواقع طاولة بها ثلاثة صفوف وثلاثة أعمدة. في الواقع، تم استخدامه في الأصل بشكل أكبر في بنية C/S للنافذة، على سبيل المثال، غالبًا ما نرى نموذجًا في البرنامج، وهو في الواقع تطبيق نموذجي لشبكة مكونة من تسعة مربعات، لأن النموذج يحتاج إلى التمدد في ثمانية اتجاهات، لذلك تُستخدم هذه التقنية على نطاق واسع في برامج C/S لتصميم التخطيط. في مجتمع اليوم حيث تحظى أنظمة B/S بشعبية كبيرة، يتم استخدام هذا التخطيط تدريجيًا من قبل بعض مصممي الويب في صفحات الويب، والأكثر استخدامًا هو تخطيط مربع الزاوية الدائري.
يوضح الشكل التالي التصميم الأساسي لشبكة القصور التسعة:
كما يتبين من الصورة أعلاه، يتضمن كل صف ثلاثة أعمدة، حيث المربع الأزرق هو الزاوية العلوية، وهذه الكتل الأربع هي مساحات ذات عرض وارتفاع ثابتين، والمناطق الصفراء الأربع هي الجوانب الأربعة، والتي يجب أن تكون أفقية أو مبلطة رأسيًا، بينما المنطقة البرتقالية في المنتصف هي المنطقة الرئيسية لتحميل المحتوى.
هذا النوع من البنية هو الأكثر ملاءمة للتوسيع التلقائي لعرض وارتفاع منطقة المحتوى وفقًا لدقة الشاشة المختلفة. هذا النوع من البنية هو أيضًا هيكل التخطيط الذي يريده مصممو الويب أكثر من غيره، وهو مرن وهادئ.
دعونا ننفذها أدناه:
الطبقة الهيكلية :
لأنه يجب أن يتكيف مع التمدد في ثمانية اتجاهات، يتم تنفيذ كل اتجاه باستخدام div. إذا كان أحدهما مفقودًا، فلن تكون المرونة كافية. ثم وفقا لهذا المبدأ، يمكننا الحصول على البنية التالية:
طبقة النمط :
وفقا للهيكل، يمكننا كتابة النمط الأساسي. مبدأ التنفيذ الأساسي هو ضبط إجمالي الحاوية.box على الموضع النسبي وتعيين overflow:hidden بحيث يتم قطع جميع المناطق الواقعة خارجه، ويتم ضبط divs في الاتجاهات الثمانية بداخله على الموضع المطلق، وz - تم ضبط الفهرس على 2، ثم تم ضبط حاويات الزوايا الأربع على الزوايا الأربع على التوالي.
.box{تجاوز: مخفي؛ الموضع: نسبي؛}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position:absolute;z-index:2;}
<div class="box">
<div class="t_l"></div>
<div class="t_m"></div>
<div class="t_r"></div>
<div class="m_l"></div>
<div class="m_m">منطقة المحتوى</div>
<div class="m_r"></div>
<div class="b_l"></div>
<div class="b_m"></div>
<div class="b_r"></div>
</div>