La grille à neuf carrés est une conception relativement ancienne. Sa performance la plus basique ressemble en fait à un tableau à trois lignes et trois colonnes. En fait, il était à l'origine davantage utilisé dans la structure C/S de la fenêtre. Par exemple, nous voyons souvent un formulaire dans le logiciel, qui est en fait une application typique d'une grille à neuf carrés car le formulaire doit être étiré. dans huit directions, donc dans Cette technologie est largement utilisée dans les logiciels C/S pour la conception de configuration. Dans la société actuelle où les systèmes B/S sont populaires, cette disposition est progressivement utilisée par certains concepteurs Web dans les pages Web. La disposition la plus couramment utilisée est la disposition en forme de boîte à coins arrondis.
La figure suivante montre la disposition de base de la grille des neuf palais :
Comme le montre l'image ci-dessus, chaque ligne comprend trois colonnes, où le carré bleu est le coin supérieur, ces quatre blocs sont des zones de largeur et de hauteur fixes, et les quatre zones jaunes sont les quatre côtés qui doivent être horizontaux. ou en mosaïque verticale, tandis que la zone orange au milieu est la zone principale de chargement du contenu.
Ce type de structure est le plus propice à l'expansion automatique de la largeur et de la hauteur de la zone de contenu en fonction des différentes résolutions d'écran. Ce type de structure est également la structure de mise en page que les concepteurs Web souhaitent le plus. Elle est flexible et calme.
Implémentons-le ci-dessous :
Couche structurelle :
Parce qu'il doit s'adapter à l'étirement dans huit directions, chaque direction est implémentée avec un div. S'il en manque un, la flexibilité sera insuffisante. Alors selon ce principe, on peut obtenir la structure suivante :
Calque de style :
Selon la structure, on peut écrire le style de base. Le principe de base de l'implémentation est de définir le conteneur.box total sur un positionnement relatif et de définir overflow:hidden; de sorte que toutes les zones au-delà soient coupées et que les divs dans les huit directions à l'intérieur soient définis sur un positionnement absolu, et leur z - L'index est défini sur 2, puis les quatre conteneurs de coin sont respectivement définis sur les quatre coins.
.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position: absolue; z-index: 2;}
<div classe="boîte">
<div class="t_l"></div>
<div class="t_m"></div>
<div class="t_r"></div>
<div class="m_l"></div>
<div class="m_m">Zone de contenu</div>
<div class="m_r"></div>
<div class="b_l"></div>
<div class="b_m"></div>
<div class="b_r"></div>
</div>