Auszeichnungssprache - für
|
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Um das CSS-Tutorial anzuzeigen, klicken Sie hier. Oben: Auszeichnungssprache – Bildersetzung . Kapitel 15 Festlegen von Stilen für <body> Einer der Vorteile der Trennung von Inhalt und Anzeige ist die Flexibilität. Indem Sie das Layout einer Website mit CSS steuern (die in Kapitel 12 verwendete Methode), können Sie die Designelemente der gesamten Website steuern. Durch Ändern einiger Regeln können Sie Tausende von Seiten auf einmal dramatisch aktualisieren. Ein Beispiel dafür, wie praktisch es ist, CSS zur Steuerung des Layouts zu verwenden, ist die Angabe von Stilen für <body>. Indem Sie dem <body>-Tag eine Klasse oder ID hinzufügen, können Sie jedes beliebige Tag auf der Seite anpassen. Sie müssen sich keine Gedanken über wiederholte Definitionen machen. In diesem Kapitel werden wir untersuchen, wie man mit derselben Markup-Struktur zwischen zwei verschiedenen Layout-Konfigurationen wechseln kann, indem man dem <body>-Tag Klassen hinzufügt. Zwei- oder dreispaltige Layouts sind wie bei der Neugestaltung der Website für Fast Company mit CSS-Layouttechniken. Eine der Herausforderungen besteht darin, dass wir, obwohl alle Seiten denselben Navigations- und Fußzeilenbereich verwenden, auch zwei verschiedene Layouts erstellen müssen. Das erste Layout ist die „Indexseite (Homepage)“, siehe Abbildung 15-1. Dies ist eine Seite mit Navigationsfunktionen, die es Benutzern ermöglicht, weiter in die Verzeichnisstruktur der Website einzusteigen. Für diese Seiten haben wir uns für ein dreispaltiges Layout entschieden.  Abbildung 15-1 Die dreispaltige „Indexseite“ von Fast Company zeigt das zweite Seitenlayout, die „Inhaltsseite“ (Abbildung 15-2). Jede Seite, die wie ein Ziel wirkt, verwendet dieses Layout. Um die Lesbarkeit zu verbessern, haben wir uns entschieden, die linke Spalte wegzulassen und zwei Spalten zu belassen, d. h. eine große Spalte für den Inhalt und die andere für Werbung.  Abbildung 15-2 Beispiel einer zweispaltigen „Inhaltsseite“ von Fast Company. Ich erkläre dies nicht, um zu beweisen, dass wir ein großes Mysterium des Seitenlayouts gelöst haben, sondern um zu demonstrieren, dass wir durch das Hinzufügen von Klassen zum <body>-Tag die Spaltenbreite anpassen und die dritte Spalte je nach Seitenform platzieren oder weglassen können. Beim Erstellen eines derartigen Effekts werden keinerlei Regeln wiederholt und keine zusätzlichen Stylesheets eingeführt. Auszeichnung und Stilstruktur Nachdem wir begonnen haben, die gemeinsame Auszeichnungsstruktur der beiden Seiten zu beschreiben, beginnen diese Beschreibungen Sinn zu ergeben. Um ein Spaltenlayout zu erreichen, wird die in Kapitel 12 erwähnte Methode der absoluten Positionierung verwendet. Die vereinfachte Auszeichnungsstruktur der Inhaltsseite sieht folgendermaßen aus:
Verwenden Sie CSS-Regeln, um #content und #footer einen rechten äußeren Patch hinzuzufügen, der groß genug ist, um mit absoluter Positionierung in #right zu passen. In diesem Beispiel sind 190 Pixel gerade ausreichend.
Indexseite: Für die Indexseite ist die Markup-Struktur exakt gleich, sodass die gemeinsamen CSS-Regeln nicht dupliziert werden müssen. Allerdings wird links von #content ein zusätzliches <div> als dritte Spalte (#left) hinzugefügt.<div id="Kopfzeile"> ...Header-Infos hier... </div> <div id="Inhalt"> ...Inhalt hier... </div> <div id="links"> ...Informationen in der linken Spalte... </div> <div id="rechts"> ...Info in der rechten Spalte... </div> <div id="Fußzeile"> ...Fußzeileninformationen... </div> |
<<: Detaillierte Erklärung des Unterschieds zwischen JavaScript onclick und click
>>: Implementierungsprinzip und Prozessanalyse der TCP-Leistungsoptimierung
Artikel empfehlen
Detaillierte Erläuterung der JavaScript-Closure-Probleme
Closures sind eines der traditionellen Features r...
Detaillierte Erklärung der MySQL InnoDB-Indexerweiterung
Indexerweiterung: InnoDB erweitert automatisch je...
Detaillierte Erklärung, wie man IP-Adressen effektiv in MySQL speichert und wie man zwischen String-IP und numerischen Werten konvertiert
In Bezug auf High Performance MySQL Version 3 (Ab...
Vollständige Analyse des MySQL INT-Typs
Vorwort: Integer ist einer der am häufigsten verw...
5 gängige Szenarien und Beispiele für die Destrukturierungszuweisung in JavaScript
Inhaltsverzeichnis Vorwort 1. Daten extrahieren 2...
Probleme mit der NodeJS-, Koa- und Typescript-Integration und dem automatischen Neustart
Inhaltsverzeichnis Versionshinweise Erstellen ein...
Detaillierte Erklärung der For-Schleife und der doppelten For-Schleife in JavaScript
for-Schleife Die For-Schleife durchläuft die Elem...
Methoden und Schritte zur Verwendung von http-Proxy-Middleware zur domänenübergreifenden Implementierung von Proxy in Node
Inhaltsverzeichnis 1. Installieren Sie das Proxy-...
Probleme bei der Verwendung von Azure Container Registry zum Speichern von Bildern
Azure Container Registry ist ein verwalteter, ded...
Vue3 Vue CLI-Konfiguration für mehrere Umgebungen
Inhaltsverzeichnis 1. Einleitung 2. Umschalten 1....
Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung
Inhaltsverzeichnis Umsetzungsideen: Schritt 1: Ko...
Lernen Sie MySQL-Datenbanken in einer Stunde (Zhang Guo)
Inhaltsverzeichnis 1. Datenbankübersicht 1.1 Entw...
Detaillierte Erklärung des Prinzips des js-Proxys
Inhaltsverzeichnis Was ist der Proxy-Modus? Einfü...
JavaScript zum Erreichen eines einfachen Message Board-Falls
Verwenden Sie Javascript, um ein Message Board-Be...
Detaillierte Erklärung zum manuellen Bereitstellen einer Remote-MySQL-Datenbank unter Linux
1. Installieren Sie MySQL. Führen Sie den folgend...