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

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

Artikel empfehlen

Beispiel für die Implementierung von QR-Code-Scaneffekten mit CSS3

Online-Vorschau https://jsrun.pro/AafKp/ Erster B...

Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle

Ich habe zwei Jahre lang im Betrieb und in der Wa...

Verwenden von Streaming-Abfragen in MySQL, um Daten-OOM zu vermeiden

Inhaltsverzeichnis 1. Einleitung 2. JDBC implemen...

Bringen Sie Ihnen bei, wie Sie die rekursive Methode von MySQL8 verwenden

Ich habe zuvor einen Artikel über rekursive Abfra...

Detaillierte Erläuterung der Nginx-Optimierung in Szenarien mit hoher Parallelität

Bei täglichen Betriebs- und Wartungsarbeiten werd...

Zusammenfassung der neuen Verwendung von vi (vim) unter Linux

Ich benutze den vi-Editor seit mehreren Jahren, h...

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Verwenden Sie CSS, um Bildlaufleisten zu ändern 1...

Zusammenfassung der wichtigsten Wissenspunkte zur MySQL-Abfrageoptimierung

Vorwort Abfrageoptimierung ist nichts, was über N...

Eine kurze Analyse der privaten Docker-Bildbibliothek und des Alibaba Cloud-Objektspeicher-OSS

Private Docker-Imagebibliothek Private Docker-Bil...

18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie

Designer müssen Psychologie verstehen, indem sie ...

Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet

Inhaltsverzeichnis 1. Umsetzung 2. Probleme 3. Üb...

Über die Implementierung des JavaScript-Karussells

Heute ist ein weiterer sehr praktischer Fall. All...

CSS3-Countdown-Effekt

Ergebnisse erzielen Implementierungscode html <...

So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout

Ich spiele jetzt schon eine Weile mit Diagrammen ...

20 hervorragende Beispiele für die Farbabstimmung auf ausländischen Webseiten

In diesem Artikel werden 20 hervorragende Beispiel...