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

Neue Funktionen in MySQL 8.0 - Einführung in die Verwendung des Management-Ports

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Artikel

Linux-Anfänger konfigurieren in virtuellen Maschinen IP und starten das Netzwerk neu

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

Neue Funktionen in MySQL 8.0 - Einführung in die Verwendung des Management-Ports

Verwenden Sie Docker, um einen Redis-Master-Slave-Replikationscluster zu erstellen

MySQL-Datentabellenpartitionierungsstrategie und Vor- und Nachteileanalyse

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Linux-Anfänger konfigurieren in virtuellen Maschinen IP und starten das Netzwerk neu

Docker-Container kommunizieren direkt über Routing, um Netzwerkkommunikation zu erreichen

Ausführliche Erklärung des Sperrmechanismus in MySQL

Detaillierte Erklärung der Verwendung gängiger Linux-Befehle (Teil 2) ———— Texteditor-Befehle vi/vim

Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

So legen Sie die Speichergröße von Docker Tomcat fest

Artikel empfehlen

Kurze Analyse der geplanten MySQL-Sicherungsaufgaben

Eine kurze Diskussion über die Synchronisierungslösung zwischen MySQL und Redis Cache

Detaillierte Erläuterung der Konfigurationsstrategie für Linux-Umgebungsvariablen

Mehrere CSS3-Tag-Abkürzungen (empfohlen)

Zusammenfassung wichtiger Breakpoint-Debugging-Techniken für JavaScript (empfohlen)

So verwenden Sie eine VLAN-getaggte Ethernet-Karte im CentOS/RHEL-System

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

Grafisches Tutorial zu MySQL-Downloads und Installationsdetails

Schauen wir uns einige leistungsstarke Operatoren in JavaScript an

Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr

Beheben Sie das Problem, dass die Alibaba Cloud SSH-Remoteverbindung nach kurzer Zeit getrennt wird

Eine kurze Diskussion darüber, ob CSS-Animationen durch JS blockiert werden

Detaillierte Erklärung von Softlinks und Hardlinks in Linux

Mit CSS3 wird ein Kegelschnitt-Gradienteneffekt erzielt

Beispielcode zum Konvertieren von Videos mit der ffmpeg-Befehlszeile