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

Umfassende Zusammenfassung der MySQL-Funktionen

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

Umfassende Zusammenfassung der MySQL-Funktionen

Einfaches Grafik-Tutorial zur Verwendung von Adobe Brackets

Detaillierte Schritte zur Verwendung von Redis in Docker

Beispiel, wie man einen Div-Hintergrund transparent macht

Lösung für die Nichterreichbarkeit des Tencent Cloud Server Tomcat-Ports

Tipps zum Erstellen von Webseiten für Mobiltelefone

So zeigen Sie Webseiten in verschiedenen Auflösungen und Browsern richtig an

Die Fallstricke und Lösungen, die durch den Standardwert von sql_mode in MySQL 5.7 verursacht werden

Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

Zusammenfassung gängiger Befehle zur Linux-Benutzer- und Gruppenverwaltung

Artikel empfehlen

MySQL effiziente Abfrage Left Join und Gruppieren nach (plus Index)

JavaScript CSS3 zur Implementierung einer einfachen Video-Sperrfunktion

Detaillierte Erklärung zum Erstellen einer aktualisierbaren Ansicht in MySQL

Detaillierte Erklärung zur Formatierung von Zahlen in MySQL

Einen Web-Rechner mit Javascript schreiben

Der Vue.js-Cloud-Speicher realisiert die Bild-Upload-Funktion

Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker

Zusammenfassung der Wissenspunkte zum B-Tree-Index bei der MySQL-Optimierung

Aktivieren Sie den SSHD-Vorgang im Docker

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung

Heute bin ich auf ein sehr seltsames Problem gestoßen und habe es selbst gelöst

So konfigurieren Sie die Portweiterleitung für Docker unter CentOS 7, damit sie mit der Firewall kompatibel ist

Hast du genau verstanden Schlagworte Definition Verwendung

Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann