Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren. Wenn Sie das CSS -Tutorial durchsuchen möchten, klicken Sie bitte hier.
Oben: Markup -Sprache - Bildersatz . Kapitel 15 Geben Sie einen Stil für <body> an
Einer der Vorteile des Setzens von Inhalten und Anzeigen von Effekten ist die Flexibilität. Durch die Verwendung von CSS zur Steuerung des Layouts der Website (die in Kapitel 12 verwendete Methode) können Sie die Designelemente der gesamten Website steuern, einige Regeln ändern und sofort Tausende von Seiten dramatisch aktualisieren.
Eines der Convenience -Beispiele für die Verwendung von CSS zur Steuerung von Layout ist die Angabe eines Stils für <body> und durch Hinzufügen von Klassen oder ID zu <body> Tags können Sie alle Tags auf der Seite anpassen. Es gibt überhaupt keine Probleme mit wiederholten Definitionen.
In diesem Kapitel werden wir untersuchen, wie Sie eine Tag -Struktur verwenden, um zwei verschiedene Layoutkonfigurationen zu wechseln, indem Sie das <body> -Tag addieren. Zwei-Spalt- oder dreispaltige Layouts.
Genau wie bei der Neugestaltung einer Website für Fast Company mithilfe der CSS -Layout -Technologie ist eine der Herausforderungen: Obwohl alle Seiten die gleiche Navigation und das gleiche Ende der Seite teilen, sind auch zwei verschiedene Layouts erforderlich.
Das erste Layout ist die Indexseite (Homepage), siehe Abbildung 15-1. Dies ist eine Seite mit Navigationsfunktion, mit der Benutzer weiter in die Verzeichnisstruktur der Website eindringen können. Wir beschlossen, ein dreispaliges Layout für diese Seiten zu verwenden.
Abbildung 15-1 Fast Company's Drei-Säulen-Indexseite Demonstration
Das Layout der zweiten Seite ist die interne Seite Abbildung 15-2. Jede Seite, die sich so anfühlt, als ob das Ziel dieses Layout -Layout verwendet. Um die Lesbarkeit zu verbessern, haben wir beschlossen, die linke Spalte wegzulassen und zwei Spalten zu hinterlassen, dh eine große Spalte platziert den Inhalt und die andere stellt Anzeigen.
Abbildung 15-2 Fast Company's Zwei-Säulen-Textseite Demonstration.
Der Grund, warum ich dies erkläre, ist nicht zu beweisen, dass wir das große Geheimnis eines bestimmten Layouts geknackt haben, sondern zu demonstrieren, dass das Hinzufügen von Klasse zum <body> -Tag die Breite der Spalte anpassen und die dritte Spalte gemäß der Seitenform platzieren oder weglassen kann. Beim Erstellen eines solchen Effekts werden überhaupt keine Regeln wiederholt, und es werden keine zusätzlichen Stilblätter eingeführt. Markierungen und Stilstrukturen werden hinzugefügt.
Nachdem diese Erzählungen begonnen haben, die von den beiden Seiten geteilte Markierungsstruktur zu beschreiben, werden sie Sinn machen. Um das Spaltenlayout zu erreichen, wird die in Kapitel 12 genannte absolute Positionierungsmethode verwendet.
Die vereinfachte Tag -Struktur der Textseite sieht folgt aus:
<div id = header>
... Header -Info hier ...
</div>
<div id = content>
... Inhalt hier ...
</div>
<div id = rechts>
... Rechte Spalteninfo ...
</div>
<div id = footer>
... Fußzeile Info ...
</div>
Verwenden der CSS-Regeln als #Content und #foter sowie ein rechtsgerechtes Patch, das ausreicht, um die absolute Positionierungsmethode in #RIGH zu setzen. In diesem Beispiel reichen 190 Pixel gerade aus.
#Content, #footer {
Rand: 10px 190px 10px 10px;
}
Bei Indexseiten ist die Markup -Struktur genau gleich, sodass keine gemeinsam genutzte CSS -Regel kopiert werden muss, aber links von #Content als dritte Spalte (#Left) ein zusätzliches <div> hinzugefügt wird.
<div id = header>
... Header -Info hier ...
</div>
<div id = content>
... Inhalt hier ...
</div>
<div id = links> ... Linksspalteninformationen ... </div> <div id = rechts> ... Rechte Spalteninfo ... </div><div id = footer>
... Fußzeile Info ...
</div>
Für diese dreispaltige Struktur sollten wir nicht nur den rechten äußeren Patch für #Content und #Foter einstellen, um die rechte Spalte aufzunehmen, sondern wir sollten auch den linken äußeren Patch einstellen, um die neu hinzugefügte linke Spalte aufzunehmen.
Der linke äußere Patch wurde jedoch auf 10 Pixel eingestellt, um das voreingestellte Textseite zu entsprechen, das nur doppelte Spalten enthält.
Wow, wir stecken fest, wie sollen wir weitermachen? Bitte lesen Sie weiter.
Vorherige Seite 1 2 3 Nächste Seite Lesen Sie den vollständigen Text