In meinem vorherigen Tutorial „ Das unzerbrechliche Neun-Gong-Raster-Layout “ habe ich eine relativ perfekte Neun-Quadrat-Raster-Layout-Methode vorgestellt, die ihre Breite und Höhe völlig flexibel anpassen kann, um einen flexibleren Layout-Stil zu erreichen.
Um die elastische Funktion perfekt widerzuspiegeln, ist der Preis jedoch immer noch sehr hoch. Aus struktureller Sicht ist die Struktur relativ aufgebläht, aber jeder Knoten ist unverzichtbar und kann nicht gestrafft werden, da er sonst zu seiner Flexibilität führt. nicht genug.
In praktischen Anwendungen mögen viele Designer diese Layoutstruktur möglicherweise nicht und halten sie für überflüssig.
Ein perfektes Neun-Quadrat-Gitterdesign sollte eine dreischichtige, getrennte Struktur sein. Das ideale Neun-Quadrat-Gitter, das ich erreichen möchte, sollte so aussehen:
Daher werde ich in diesem Artikel versuchen, dieses Layout so nah wie möglich an diesen idealisierten Zustand heranzuführen, um es für die Anwendung in verschiedenen Aspekten besser geeignet zu machen.
In Bezug auf den ersten und zweiten Punkt gibt es keine andere Möglichkeit, als die js-Kapselung zu verwenden, wenn Sie die Flexibilität beibehalten und einen optimierten Effekt erzielen möchten, dh wenn Sie „Ihren Kuchen haben und ihn auch essen“ möchten. Man kann sagen, dass dies eine Art „die Ohren verstecken und die Glocke stehlen“-Ansatz ist. Ja, ich muss zugeben, dass diese Methode der Kapselung mit JS ihre Struktur im Wesentlichen nicht vereinfacht, sondern nur eine dynamische Methode zur Kapselung verwendet Struktur erstellen, aber es wirkt sich sofort auf redundante HTML-Strukturen aus und alle redundanten Strukturen sind auf einen Schlag unsichtbar.
Lassen Sie uns lernen, wie wir unser Neun-Quadrat-Raster durch den dreischichtigen Trennungsansatz verbessern können.
Strukturschicht :
Dies ist der Schlüsselbereich, den wir so weit wie möglich optimieren möchten. Wir verwenden js, um seine Struktur dynamisch zu erstellen, daher sollte die aktuelle Struktur die originellste Struktur wie folgt sein:
<div class="box">Das erste Neun-Quadrat-Feld</div>
<div class="box" id="one">Das zweite Neun-Quadrat-Feld</div>
<div class="box" id="two">Das dritte Neun-Quadrat-Feld</div>
Die einzige Änderung, die ich vorgenommen habe, bestand darin, jedem Feld eine andere ID hinzuzufügen, wodurch ein Hook für den Aufruf des Stylesheets übrig bleibt, um später verschiedene Farben zu erstellen. Verwenden Sie diese ID, um im Stylesheet verschiedene Bilder oder Farbstile zu erstellen.
Wir müssen nur eine Klasse = „Box“ zum Div-Container hinzufügen, und schon wird das Neun-Quadrat-Raster-Layout erfolgreich erstellt. Das ist ganz einfach!
Stilebene:
Gerade haben wir den Durchbruch bei der Anpassung des Stils (der unterschiedlichen ID) in der Strukturebene vergraben, damit es einfacher wird, den Stil zu schreiben. Wir überschreiben und setzen die Stile aller neun Stellen zurück, an denen der Stil geändert werden muss, um unterschiedliche Stile zu erhalten.
Natürlich können Sie dem Hintergrund auch unterschiedliche Bilder als Hintergrund hinzufügen. Der Einfachheit halber habe ich nur den Farbwert genannt. Der spezifische Schnittstellenstil hängt von Ihren Designfähigkeiten ab.
/*Farbschema eins*/
#one .t_l{background:blue;}
#one .t_r{background:blue;}
#one .t_m{background:orange;}
#one .m_l{background:orange;}
#one .m_r{background:orange;}
#one .b_l{background:blue;}
#one .b_r{background:blue;}
#one .b_m span{background:orange;}
#one .context{background:#666;}
/*Farbschema zwei*/
#two .t_l{background:red;}
#two .t_r{background:red;}
#two .t_m{background:black;}
#two .m_l{background:black;}
#two .m_r{background:black;}
#two .b_l{background:red;}
#two .b_r{background:red;}
#two .b_m span{background:black;}
#two .context{background:#999;}