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

Details zu MySQL-Zeittypen und -Modi

Inhaltsverzeichnis 1. MySQL-Zeittyp 2. Überprüfen...

40 CSS/JS-Stil und funktionale technische Verarbeitung

1- Dropdown-Auswahlfelder gestalten – Ändern Sie ...

So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle

Einfach ausgedrückt besteht die MySQL-Wurmreplika...

Analyse des Sperrmechanismus der MySQL-Datenbank

Bei gleichzeitigen Zugriffen kann es zu nicht wie...

So ändern Sie $ in # in Linux

In diesem System steht das #-Zeichen für den Root...

Eine kurze Diskussion über die Ungültigkeitserklärung oder implizite Konvertierung von MySQL-Integer- und String-Indizes

Inhaltsverzeichnis Problemübersicht Reproduktion ...

Verlustfreie Erweiterungsmethode unter Linux

Überblick Der Server des Cloud-Plattform-Kunden k...

Detaillierte Erklärung der Rolle statischer Variablen in MySQL

Detaillierte Erklärung der Rolle statischer Varia...

MySQL-Cursorfunktionen und -Verwendung

Inhaltsverzeichnis Definition Die Rolle des Curso...

Gründe für den plötzlichen Leistungsabfall bei MySQL

Manchmal kann es vorkommen, dass eine SQL-Anweisu...

Schreiben von qualitativ hochwertigem Code – Praxisbuchauszüge zur Web-Frontend-Entwicklung

(Teil 4) Webstandards bestehen aus einer Reihe von...

Eine kleine Frage zur Ausführungsreihenfolge von SQL in MySQL

Ich bin heute bei der Arbeit auf ein SQL-Problem ...

Neue Funktionen von Spring Boot 2.4: Detaillierte Erläuterung des Prozesses zum Erstellen eines Docker-Image mit nur einem Klick

Hintergrund Um die Docker-Containerisierung währe...

Lösungen für das Problem der Tabellenschachtelung und Rahmenzusammenführung

【Frage】 Wenn die äußere und die innere Tabelle ve...

Implementierung der React-Sternebewertungskomponente

Voraussetzung ist die Eingabe der Bewertungsdaten...