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

Detaillierte Erläuterung zur Konfiguration des Beispielcodes für den Nginx-Webserver

Überblick Heute werden wir hauptsächlich erläuter...

Detaillierte Erläuterung zur Konfiguration des externen Tomcat-Servers in HBuilderX zum Anzeigen und Bearbeiten der JSP-Schnittstelle

1. Die erste Methode besteht darin, den lokalen T...

Detaillierte Erklärung der Tomcat-Verzeichnisstruktur

Inhaltsverzeichnis Verzeichnisstruktur bin-Verzei...

Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten

Inhaltsverzeichnis JS Drei Berge Synchron Asynchr...

Detaillierte Analyse dieser Richtung in JavaScript und wie die Richtung geändert werden kann

Inhaltsverzeichnis Das Verfahren Im Objekt Verste...

Praktische Aufzeichnung der Handhabung von MySQL-Problemen beim automatischen Herunterfahren

Ich habe vor Kurzem jemandem bei einem Projekt ge...

Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet

1 Einleitung Im Artikel „PostgreSQL mit Docker st...

Tutorial zur Installation von MySQL 5.7.28 auf CentOS 6.2 (MySQL-Hinweise)

1. Umweltvorbereitung 1.MySQL-Installationspfad: ...

Beheben Sie den Fehler während der Verbindungsausnahme in Docker

Wenn Sie Docker zum ersten Mal verwenden, werden ...

Das neueste, äußerst detaillierte grafische Tutorial zum Herunterladen und Installieren virtueller VMware-Maschinen

Inhaltsverzeichnis 1. Laden Sie die virtuelle Mas...

2017 neueste Version der Windows-Installation MySQL-Tutorial

1. Laden Sie zunächst die neueste Version von MyS...

jQuery implementiert alle Auswahl- und umgekehrten Auswahloperationsfälle

In diesem Artikel wird der spezifische Code von j...

100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)

Vorwort „Wenn es um Bildbearbeitung geht, denken ...

Lernen Sie den Rendering-Prozess von HTML-Seiten kennen, um sich auf die Optimierung der Front-End-Leistung vorzubereiten (Fortsetzung)

Gestern Abend habe ich einen Aufsatz über den Bro...

Lösung für Linux CentOS 6.5 ifconfig kann IP nicht abfragen

Kürzlich sagten einige Freunde, dass sie nach der...