In meinem vorherigen Tutorial „Grundlegendes Layout von neun Palästen“ habe ich die Methode der Verwendung relativer Positionierung und absoluter Positionierung zum Erstellen des grundlegenden Layouts von neun Palästen vorgestellt. Dies ist eine Methode, die eher dem Trägheitsdenken der Menschen entspricht. Aufgrund des ekelhaften Paritätsfehlers von IE6 ist dies jedoch für dieses Layout etwas unerreichbar Diese Methode muss universell sein, da die meisten inländischen Benutzer immer noch IE6 verwenden und wir diese Benutzer dadurch nicht verlieren können.
Derzeit gibt es keine Heilung für diesen Fehler und es gibt keine Hacks, die verwendet werden können. Die einzige Möglichkeit, ihn zu umgehen, besteht darin, ihn zu umgehen. Mit anderen Worten, ich möchte die vier Eckcontainer des Neun-Quadrat-Rasters nicht verwenden. Dies ist ein schwerer Schlag, den ich in meinem vorherigen Artikel verwendet habe erneut.
Welche anderen Technologien können diesen Fehler vor einer schlimmen Situation bewahren? Wir wissen, dass Sie mit der linken und rechten Floating-Methode das Elementobjekt genau versetzen können und mit dieser Methode auch den Paritätsfehler von IE6 vermeiden können. OK, nutzen wir es.
Wichtige Punkte und Schwierigkeiten beim Layout
Wir bauen die Struktur unseres neuen Modells immer noch entsprechend der Struktur der Tabelle auf, dieses Mal wird sie sich jedoch von der Struktur des vorherigen Artikels unterscheiden. Die wichtigsten Punkte und Schwierigkeiten, auf die wir in diesem Modell achten müssen, sind die folgenden zwei Punkte:
1. Die Breitenwerte der beiden Zwischencontainer t_m und b_m müssen ein Prozentwert sein, da sonst die dynamische Erweiterung nach links und rechts des gesamten Neun-Quadrat-Rasters nicht garantiert werden kann und es sich nicht um einen festen Pixelwert handeln darf. Seine Breite entspricht der gesamten Containerbreite abzüglich der prozentualen Summe der Breiten der beiden Eckcontainer. Die Berechnungsformel lautet:
Die Breite von t_m (oder b_m) = (Gesamtbreite des Containers – (Breite des oberen linken Eckcontainers + Breite des oberen rechten Eckcontainers)) / Gesamtbreite des Containers
Das heißt, die Breite von t_m oder b_m beträgt nicht 100 %. Die Breite der beiden Container t_l und t_r entspricht jedoch in der Regel der Breite eines Bildes, sodass es sich im Allgemeinen um einen festen Breitenwert handelt die gleichen drei In einem Container ist die Breite auf der linken und rechten Seite ein fester Wert, aber die Mitte erfordert einen Prozentsatz, und die Gesamtbreite dieser drei Container sollte 100 % ergeben.
Hier verwenden wir eine relativ sichere Methode, um den mittleren Container auf den idealen Breitenprozentsatz zu bringen:
Wir können einen DIV-Container verwenden und seinen Abstand festlegen: 0 10px; seine Breite beträgt standardmäßig 100 %. Da die linken und rechten Auffüllwerte festgelegt sind, ist die interne Breite der ideale Breitenwert von t_m, den wir wollen. Daher definieren wir einen Container darin und die Breite dieses Untercontainers wird auf 100 % festgelegt. Die Hintergrundfarbe dieses Untercontainers kann auf ein horizontal gekacheltes Hintergrundbild links und rechts eingestellt werden. Dieser Untercontainer ist der oberste Container, den wir verwenden werden. Es erfüllt unsere speziellen Anforderungen an Breitenwerte.
Daher kann die Struktur von t_m in die folgende Struktur umgewandelt werden:
Diese Definition verursacht jedoch ein weiteres Problem in Browsern unter IE7. Da wir Padding definieren, werden auch linke und rechte innere Patches in der mittleren Körperschicht generiert. Ja: Warum hat es Auswirkungen? IE7?
Abhilfe schafft hier also ein HACK-Trick für IE6 und IE7:
.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
Dieser Satz legt unterschiedliche Offset-Werte für drei Browser fest und versetzt b_l und b_r nach links und rechts zur angegebenen Position.
2. Die Höhenwerte der beiden Container b_l und b_r müssen gleich sein, damit sie die Hintergrundfarbe vertikal nach unten kacheln können. Wenn sich auf diese Weise die Höhe des Inhalts im mittleren Hauptinhaltsbereich (Kontext) ändert, kann die Hintergrundfarbe auf beiden Seiten immer die gleiche Höhe wie der Hauptinhaltsbereich (Kontext) beibehalten. Das heißt, sie können ihre Höhe entsprechend der Höhe des Inhaltskörpers frei erweitern.
Um dieses Problem zu lösen, können wir die in der täglichen Arbeit häufig verwendete Methode mehrerer Säulen mit derselben Höhe verwenden. Diese Methode verwendet eine Kombination aus inneren Patches und negativen äußeren Patches, um für mehrere Spalten die gleiche Höhe zu erreichen:
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
Wir setzen den Padding-Bottom-Wert des unteren inneren Patches von m_l und m_r auf einen relativ großen Wert. Ich habe sie beispielsweise auf 30000 Pixel eingestellt (Sie können ihn im Allgemeinen auf den gewünschten Wert einstellen). diesen Höhenwert nicht überschreiten. Setzen Sie dann den unteren äußeren Patch (margin-bottom) auf denselben negativen Wert wie den unteren inneren Patch-Wert (padding-bottom), ziehen Sie ihn an seine ursprüngliche Position zurück und setzen Sie den Gesamtcontainer (Box) auf overflow:hidden;, Schneiden Sie die überschüssige Höhe ab, um sicherzustellen, dass die beiden Säulen die gleiche Höhe haben.
Nachdem die beiden oben genannten schwierigen Probleme gelöst wurden, ist der Rest einfach und macht Spaß! [Seite ausschneiden]
Strukturschicht
Jetzt haben wir die Strukturebene basierend auf dem vorherigen Fall angepasst, sodass sie die folgende Struktur aufweist:
Nachfolgend der zitierte Inhalt:
Inhaltsbereich |
Stilebene
Hier sind die wichtigsten Stileinstellungen:
Nachfolgend der zitierte Inhalt: /*Gesamtbehälter*/ .box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;} /*Top-Stil*/ /*Mittelschwerer Stil*/ /*Unterer Stil*/ |
Sie können acht Bilder verwenden, um eine schöne neunquadratische Gitterbox zu erstellen. Schauen Sie, wie perfekt es ist.
Dieses Modell wurde in den folgenden Browsern getestet:
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
Nachfolgend der zitierte Inhalt: Dies ist ein Neun-Quadrat-Raster-Layout-Modell. Bitte dehnen und ändern Sie die Größe des Fensters. Sie werden sehen, dass sich das Neun-Quadrat-Raster frei und elastisch in alle Richtungen ausdehnt. Dieses Modell hat die Mängel der vorherigen Version geändert, indem es die Floating-Methode verwendet, um den seltsamen 1-Pixel-Bug bei Breite und Höhe in IE6 zu vermeiden, und ist perfekt mit allen gängigen Browsern kompatibel. Dieser Modelltest wurde in den folgenden Browsern vollständig bestanden: IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0. Weitere Originalwerke finden Sie unter: Bingjifeng-Blog Blog-Adresse: http://www.cnblogs.com/binyong |