Informationen zur Verarbeitung des adaptiven Layouts (mit Float und negativem Rand)

Adaptives Layout wird in praktischen Anwendungen immer häufiger verwendet. Heute werde ich mehrere Demos des adaptiven Layouts zeigen, hauptsächlich das schwebende Holy-Grail-Layout (auch Double-Wing-Layout genannt, das hauptsächlich durch schwebende und negative Ränder implementiert wird). Ich habe das Layout mit absoluter Positionierung nicht vorgestellt, da ich denke, dass Sie die folgenden Beispiele verstehen können. Das Layout mit absoluter Positionierung ist auch sehr einfach.

PS: Das Holy Grail-Layout hat einen Vorteil, nämlich dass es dem Konzept der progressiven Verbesserung in der Front-End-Entwicklung entspricht. Da der Browser das DOM von oben nach unten analysiert, kann das Holy Grail-Layout den wichtigen Inhaltsabschnitt der Seite vor das DOM stellen und zuerst analysieren, während der sekundäre Inhalt hinten im DOM platziert und später analysiert wird.
Das folgende Beispiel kann die meisten adaptiven Layoutprobleme in praktischen Anwendungen lösen. Interessierte Studenten können es studieren. Der Code lautet wie folgt:

1. Links fest, rechts adaptiv (Umsetzung des Holy Grail-Layouts):

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
Körper {Rand: 0; Polsterung: 0}
.wrap{ Breite:100%; Float:links}
.Inhalt{ Höhe:300px;Hintergrund:grün; Rand links:200px}
.rechts{ Breite:200px; Höhe:300px; Hintergrund:rot; Float:links; linker Rand:-100%}
</Stil>
</Kopf>
<Text>
<div Klasse="wrap">
<div class="content">Inhalt</div>
</div>
<div class="right">beiseite</div>
</body>
</html>

2. Rechts fix, links adaptiv (Umsetzung des Holy Grail-Layouts):

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
Körper {Rand: 0; Polsterung: 0}
.wrap{ Breite:100%; Float:links}
.Inhalt{ Höhe:300px;Hintergrund:grün; Rand rechts:200px}
.rechts{ Breite:200px; Höhe:300px; Hintergrund:rot; Float:links; Rand links:-200px;}
</Stil>
</Kopf>
<Text>
<div Klasse="wrap">
<div class="content">Inhalt</div>
</div>
<div class="right">beiseite</div>
</body>
</html>

3. Linke und rechte Seite fest, Mitte adaptiv:

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
Körper {Rand: 0; Polsterung: 0}
.wrap{ Breite:100%; Float:links}
.Inhalt{ Höhe:300px;Hintergrund:grün; Rand links:200px;Rand rechts:200px}
.left{ Breite:200px; Höhe:300px; Float:links; Hintergrund:gelb; linker Rand:-100%}
.rechts{ Breite:200px; Höhe:300px; Hintergrund:rot; Float:links; Rand links:-200px}
</Stil>
</Kopf>
<Text>
<div Klasse="wrap">
<div class="content">Inhalt</div>
</div>
<div class="left">beiseite</div>
<div class="right">beiseite</div>
</body>
</html>

<<: 3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen

>>: Einführung in häufig verwendete MySQL-Befehle in der Linux-Umgebung

Lösung zum automatischen Neustart von MySQL

Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Artikel

Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux

Artikel

Teilen Sie eine Idee zum Aufbau eines Master-Slave-Systems für eine große MySQL-Datenbank

Artikel

Informationen zur Verarbeitung des adaptiven Layouts (mit Float und negativem Rand)

Lösung zum automatischen Neustart von MySQL

So entwerfen Sie MySQL-Statistikdatentabellen

JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)

SQL-Abfrage für Benutzer, die sich an mindestens n aufeinanderfolgenden Tagen angemeldet haben

Detaillierte Erklärung des Overflow-Scrollens zur Lösung des Scroll-Lag-Problems

Ubuntu MySQL-Anmeldenamen und -Passwort anzeigen und ändern, phpmyadmin installieren

Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung

Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt

Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux

Teilen Sie eine Idee zum Aufbau eines Master-Slave-Systems für eine große MySQL-Datenbank

Artikel empfehlen

SQL GROUP BY ausführliche Erklärung und einfaches Beispiel

Der Unterschied zwischen MySQL execute, executeUpdate und executeQuery

Idea stellt Remote-Docker bereit und konfiguriert die Datei

So erstellen Sie ein Apache-Image mit Dockerfile

Detaillierte Erklärung, wo das von Docker abgerufene Image gespeichert ist

MySQL-Datenbanktabellendesign mit Baumstruktur

MySQL Series II-Konfiguration für mehrere Instanzen

SVN-Installation und grundlegende Bedienung (grafisches Tutorial)

So lösen Sie das Problem der Linksausrichtung der letzten Zeile im Flex-Layout „space-between“

Express implementiert Login-Verifizierung

Architektur und Komponentenbeschreibung der privaten Docker-Bibliothek Harbor

W3C Tutorial (1): W3C verstehen

Hallo – Erfahrungsaustausch zum Entwurf von Dialogfeldern

MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)

Detaillierte Erläuterung der WordPress-Multisite-Konfiguration in der Nginx-Umgebung