Das Neun-Quadrat-Raster ist ein relativ altes Design. Seine grundlegendste Leistung ähnelt tatsächlich einer Tabelle mit drei Zeilen und drei Spalten. Tatsächlich wurde es ursprünglich eher in der C/S-Struktur des Fensters verwendet. Beispielsweise sehen wir in der Software häufig ein Formular, das eigentlich eine typische Anwendung eines Neun-Quadrat-Rasters ist, da das Formular gestreckt werden muss in acht Richtungen, also in Diese Technologie wird häufig in C/S-Software für das Layoutdesign verwendet. In der heutigen Gesellschaft, in der B/S-Systeme beliebt sind, wird dieses Layout nach und nach von einigen Webdesignern auf Webseiten verwendet. Am häufigsten wird das Box-Layout mit abgerundeten Ecken verwendet.
Die folgende Abbildung zeigt den Grundaufbau des Nine Palace Grid:
Wie aus dem Bild oben ersichtlich ist, enthält jede Zeile drei Spalten, wobei das blaue Quadrat die obere Ecke darstellt, diese vier Blöcke Bereiche mit fester Breite und Höhe sind und die vier gelben Bereiche die vier Seiten sind, die horizontal sein sollen oder vertikal gekachelt, während der orangefarbene Bereich in der Mitte der Hauptbereich zum Laden von Inhalten ist.
Diese Art von Struktur eignet sich am besten für die automatische Erweiterung der Breite und Höhe des Inhaltsbereichs entsprechend unterschiedlicher Bildschirmauflösungen. Diese Art von Struktur ist auch die Layoutstruktur, die sich Webdesigner am meisten wünschen. Sie ist flexibel und ruhig.
Lassen Sie es uns unten implementieren:
Strukturschicht :
Da es sich an die Dehnung in acht Richtungen anpassen muss, wird jede Richtung mit einem Div implementiert. Fehlt eines, ist die Flexibilität unzureichend. Nach diesem Prinzip können wir dann die folgende Struktur erhalten:
Stilebene :
Entsprechend der Struktur können wir den Grundstil schreiben. Das grundlegende Implementierungsprinzip besteht darin, die gesamte container.box auf relative Positionierung und overflow:hidden; Der Index wird auf 2 gesetzt, und dann werden die vier Eckcontainer jeweils auf die vier Ecken gesetzt.
.box{overflow:hidden;position:relative;}
.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">Inhaltsbereich</div>
<div class="m_r"></div>
<div class="b_l"></div>
<div class="b_m"></div>
<div class="b_r"></div>
</div>