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

So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann

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

So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann

Detaillierte Erläuterung des Redo-Logs und Undo-Logs in MySQL

Schritte zum Erstellen eines WEBSERVERS mit NODE.JS

Lösung für zu große Mysql-Binlog-Protokolldateien

Elementui exportiert Daten in XLSX- und Excel-Tabellen

So konfigurieren Sie WordPress mit Nginx

So verwenden Sie Docker zum Bereitstellen von Front-End-Anwendungen

Detaillierte Erläuterung des MySQL Workbench-Nutzungs-Tutorials

Implementierungsbeispiel für die Bereitstellung von Docker rocketmq

Über Vue, um wiederholte Eingabeaufforderungen beim Aktualisieren der Seite nach Ablauf des Tokens zu vermeiden

Artikel empfehlen

Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner

Drei Strategien zum Umschreiben von MySQL-Abfrageanweisungen

Implementierungsschritte zum Erstellen mehrseitiger Programme mit Webpack

Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge

Eine kurze Analyse des Zeitproblems von MySQL

Erklären, wie die SQL-Effizienz analysiert wird

Detaillierte Erklärung zum Erstellen eines Arrays in JavaScript

30 Tipps zum Schreiben von HTML-Code

Zusammenfassung einiger Tipps zum MySQL-Indexwissen

Detaillierte Erklärung der Stammverzeichniseinstellungen in nginx.conf

Tipps zur Implementierung von Listenschleifen-Scrollen basierend auf jQuery (super einfach)

So lösen Sie das Problem der Randüberlappung

Was ist die Funktion und Schreibreihenfolge der Pseudoklasse eines Tags?

Prozessdiagramm zum Aufbau des Linux RabbitMQ-Clusters

Beispiel für die Bereitstellung von MySQL 8.0 mit Docker