UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout

Als ich vor ein paar Tagen ein dreispaltiges Layout mit CSS schrieb, fiel mir diese Methode plötzlich ein. Ich finde diese Idee ein bisschen verrückt. Wenn etwas daran falsch ist, können Sie mich gerne darauf hinweisen.
Wenn ich ein dreispaltiges Layout schreiben muss, wähle ich normalerweise das folgende DIV-Layout:

Abbildung 1 DIV-Layout
Die Verwendung einer solchen verschachtelten Methode kann die Wahrscheinlichkeit von Codefehlern zweifellos erheblich verringern, gleichzeitig ist ein solches Layout jedoch auch etwas kompliziert und für die spätere Wartung etwas unpraktisch. Beim Layouten der Navigation verwenden wir häufig eine Methode, bei der die <ul>-Liste für das Layout verwendet wird. Die Navigation kann als mehrspaltiges Layout beschrieben werden. In diesem Fall können wir auch <ul> verwenden, um ein mehrspaltiges Layout der Seite durchzuführen.

Abbildung 2 DIV-Layout Dies ist ein Layout mit fester Breite, was bedeutet, dass die Fluidität nicht stark ist. Das Fluiditätslayout wurde noch nicht getestet. Ich werde es testen, wenn ich Zeit habe. Der Code dieses Layouts ist unten aufgeführt:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>UL für mehrspaltiges Layout verwenden</title>
<style type="text/css">
* {Rand:0; Polsterung:0;}
Körper {
Breite: 100 %;
Höhe: 100 %;
Hintergrund:#ddedfb;
}
#Hauptinhalt {
Breite: 600px;
Rand: 10px automatisch;
}
#Kopfzeile,#Fußzeile {
Hintergrund: #8AC7FA;
Höhe: 80px;
klar: beides;
}
#Fußzeile {
klar: beides;
Polsterung oben: 10px;
}
#Inhalt {
Höhe: 300px;
Rand: 10px automatisch;
}
#Inhalt ul {
Listenstil: keiner;
Höhe: 100 %;
}
#Inhalt ul li {
Breite: 150px;
Höhe: 100 %;
Hintergrund: #8AC7FA;
schweben: links;
}
#Inhalt ul li#li2 {
Breite: 280px;
Rand: 0 10px;
}
#Inhalt ul li#li2 ul li {
Breite: 270px;
Höhe: 140px;
Rand: 5px;
Hintergrund: #0581F0;
}
</Stil>
</Kopf>
<Text>
<div id=”Hauptinhalt”>
<div id="header">Dies ist die Kopfzeile</div>
<div id=”Inhalt”>
<ul>
<li>Dies ist die linke Seite</li>
<li id=”li2″>
<ul>
<li>Das ist die obere Mitte</li>
<li>Dies ist der untere Mittelteil</li>
</ul>
</li>
<li>Dies ist die rechte Seite</li>
</ul>
</div>
<div id="footer">Dies ist der Boden</div>
</div>
</body>
</html>
Dieser Code kann in IE7 und FF3 normal angezeigt werden. Andere Browser wurden nicht getestet. Wenn Sie eine bessere Methode haben, können Sie diese gerne vorschlagen.

<<: Docker implementiert das erneute Taggen und Löschen des Images des ursprünglichen Tags

>>: js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten

UL-Listen-Tag-Design für Webseiten mit mehrspaltigem Layout

Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten

Detaillierte Erläuterung zum Erstellen und Aufrufen von gespeicherten MySQL-Prozeduren

MySQL-Installationstutorial unter Centos7

Grafisches Tutorial zur Installation der komprimierten Version von MySQL 8.0.15

Zusammenfassung einiger gängiger Schreibmethoden, die zu MySQL-Indexfehlern führen

Detaillierte Erklärung des Java-Aufrufs von ffmpeg zum Konvertieren des Videoformats in flv

Beispielcode für reines CSS zum Erzielen eines Popup-Popup-Effekts beim Hovern von Bildern

Vue-Anpassungsmethode für Großbildschirme

VMware pro15-Installation macOS10.13 detailliertes Installationsdiagramm (Bild und Text)

Beispiel für die Implementierung einer Paging-Funktion im Vue-Backend-Verwaltungssystem

Artikel empfehlen

So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis

Befehlscodebeispiele für die Installation und Konfiguration von Docker

Beispiel für den Mehrpunkt-Routenplanungsprozess des WeChat-Applets Amap – detaillierte Erläuterung

Verwenden Sie Nicht-Root-Benutzer, um Skriptvorgänge in Docker-Containern auszuführen

CSS3-Filter (Filter) zum Erreichen des Beispielcodes für den Grau- oder Schwarzmodus einer Webseite

Dieser Artikel zeigt Ihnen, was Vite mit der Anfrage des Browsers macht

So zeigen Sie Div auf einem Objekt an, ohne durch die Objektanimation blockiert zu werden

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)

Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung

Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios

Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

So installieren und konfigurieren Sie Docker nginx

Mysql setzt Boolesche Typoperationen