Dans mon précédent tutoriel « La disposition incassable de la grille à neuf gongs », j'ai présenté une méthode de disposition de grille à neuf carrés relativement parfaite, qui peut ajuster de manière entièrement flexible sa largeur et sa hauteur pour obtenir un style de disposition plus flexible.
Cependant, afin de refléter parfaitement la fonction élastique, le prix à payer est encore très lourd d'un point de vue structurel, la structure est relativement volumineuse, mais chaque nœud est indispensable et ne peut être rationalisé, sinon cela entraînerait sa flexibilité. pas assez.
Dans les applications pratiques, de nombreux concepteurs peuvent ne pas aimer cette structure de mise en page et penser qu'elle est redondante.
Une conception parfaite de grille à neuf carrés devrait être une structure séparée en trois couches. La grille idéale à neuf carrés que je souhaite obtenir devrait être comme ceci :
Par conséquent, dans cet article, je vais essayer de rapprocher cette disposition aussi près que possible de cet état idéalisé, la rendant plus adaptée à une application sous divers aspects.
Concernant le premier et le deuxième points, si vous souhaitez conserver sa flexibilité et obtenir un effet épuré, c'est-à-dire si vous voulez « avoir le gâteau et le manger aussi », il n'y a pas d'autre moyen que d'utiliser l'encapsulation js. Vous pouvez dire que c'est une sorte d'approche « se cacher les oreilles et voler la cloche ». Oui, je dois admettre que cette méthode d'encapsulation avec JS ne simplifie pas essentiellement sa structure, mais utilise uniquement une manière dynamique pour l'encapsuler. structure Create, mais cela a un effet immédiat sur les structures HTML redondantes, et toutes les structures redondantes sont invisibles d'un seul coup.
Apprenons comment améliorer notre grille à neuf carrés à partir de l'approche de séparation en trois couches.
Couche structurelle :
C'est le domaine clé que nous souhaitons rationaliser autant que possible. Nous utilisons js pour créer dynamiquement sa structure, donc la structure actuelle doit être la structure la plus originale comme suit :
<div class="box">La première boîte de neuf carrés</div>
<div class="box" id="one">La deuxième boîte de neuf carrés</div>
<div class="box" id="two">La troisième boîte de neuf carrés</div>
La seule modification que j'ai apportée a été d'ajouter un identifiant différent à chaque boîte, ce qui laisse un crochet que la feuille de style peut appeler afin de créer des couleurs différentes ultérieurement. Utilisez cet ID pour créer différentes images ou styles de couleurs dans la feuille de style.
Nous devrions seulement avoir besoin d'ajouter un class="box" au conteneur div, et la disposition de la grille à neuf carrés sera créée avec succès. C'est assez simple !
Couche de style :
Nous venons d'enfouir le point révolutionnaire de la personnalisation du style (les différents identifiants) dans la couche de structure, il devient donc plus facile d'écrire le style. Nous remplaçons et réinitialisons les styles des neuf endroits où le style doit être modifié pour obtenir des styles différents.
Bien sûr, vous pouvez appliquer différentes images à l'arrière-plan. Je viens d'appeler la valeur de couleur pour faciliter la démonstration. Le style d'interface spécifique dépend de vos compétences en conception.
/*Schéma de couleurs un*/
#one .t_l{fond:bleu;}
#un .t_r{fond:bleu;}
#un .t_m{fond:orange;}
#un .m_l{fond:orange;}
#un .m_r{fond:orange;}
#un .b_l{fond:bleu;}
#un .b_r{fond:bleu;}
#un .b_m span{background:orange;}
#un .context{background:#666;}
/*Schéma de couleurs deux*/
#deux .t_l{fond:rouge;}
#deux .t_r{fond:rouge;}
#deux .t_m{background:black;}
#deux .m_l{fond:noir;}
#deux .m_r{fond:noir;}
#deux .b_l{fond:rouge;}
#deux .b_r{fond:rouge;}
#deux .b_m span{background:black;}
#deux .context{background:#999;}