In den vorherigen drei Artikelserien habe ich eine detaillierte Einführung in das Neun-Quadrat-Raster-Layout gegeben. Beginnen wir mit einem Grundlayout und erläutern wir nacheinander die Probleme, die während des Produktionsprozesses auftreten. Diese drei Artikel sind allesamt Erläuterungen zu Grundprinzipien. Es gibt keinen aussagekräftigen Anwendungsfall, der beweist, ob dieses Prinzip richtig ist. Einige Freunde sind vielleicht etwas ungeduldig, und einige Internetnutzer haben mich gebeten, Fälle bereitzustellen. Deshalb werde ich in diesem Artikel einen Fall von Jiugongge vorstellen – einem sehr coolen Player.
In meinem dritten Artikel „Das perfekte Neun-Gong-Gitter mit drei Trennungsebenen“ habe ich die Verwendung von JS zum Einkapseln von HTML-Tags vorgestellt, um redundante Strukturen zu reduzieren. Diese Methode ist jedoch auch fehlerhaft Natürlich sollte dies unter den heutigen Internetverhältnissen kein großes Problem darstellen, aber wenn man sich einige ausländische Webseitendesigns ansieht, ist diese Überlegung notwendig. Dies erfordert ein ordnungsgemäßes Downgrade und eine Funktionsschwächung, aber das Ergebnis ist das gleiche, als würde man die JS-Kapselung nicht verwenden. Deshalb können Sie Ihren Kuchen nicht haben und ihn auch essen. Hey, das sind alles Abschweifungen, schauen wir uns mal an, wie einer unserer coolen Player gestaltet ist!
Der erste Eindruck kommt zuerst, jeder möchte zuerst die Ergebnisse sehen, okay, zeigen wir zuerst die Screenshots:
Abbildung 1
Im Allgemeinen müssen für einen so farbenfrohen Player die Breiten- und Höhenwerte dynamisch angepasst werden, daher ist es eine sehr geeignete Wahl, für solche Grafiken ein Neunquadratraster zu verwenden.
Natürlich werde ich das Prinzip nicht wiederholen. Bitte beziehen Sie sich auf das „ Unzerbrechliche Neun-Gong-Gitter-Layout “ in meiner Artikelserie. Natürlich gibt es in der Produktion noch einige Techniken, die uns helfen können, die Aufgabe besser zu erledigen. Beispielsweise kann die CSS-Sprites-Technologie (Sie können meinen anderen Artikel „ CSS-Sprites-Bildhintergrundoptimierungstechnologie “ lesen) die Anzahl der Bildanforderungen vorteilhaft reduzieren. Im Allgemeinen gibt es für Anwendungen mit neunquadratischem Rasterlayout mehr Bilder, weil Um die vier Ecken und vier Seiten zu dekorieren, sind mindestens acht Bilder erforderlich. Daher müssen Designer darüber nachdenken, wie sie die Anzahl der Bilder reduzieren können.
In diesem Beispiel habe ich die vier Eckbilder zu einem Bild zusammengeführt, sodass sie so aussehen sollten:
Abbildung 2
Im Bild oben habe ich die Verbindungsstellen mehrerer Bilder mit Hilfslinien gezeichnet, damit alle besser sehen können. Wir haben das Prinzip der Bildpositionierung angewendet, um sie an den vier Ecken zu fixieren. Sie sind im Stylesheet wie folgt definiert:
.t_l{background:url(../image/round.gif) no-repeat left top;}
/*obere linke Ecke*/
.t_r{background:url(../image/round.gif) no-repeat right top;}
/*obere rechte Ecke*/
.b_l{background:url(../image/round.gif) no-repeat links unten;}
/*untere linke Ecke*/
.b_r{background:url(../image/round.gif) no-repeat rechts unten;}
/*Untere rechte Ecke*/