CSS verwendet ul für das mehrspaltige Layout von Webseiten

Autor：Eve Cole Aktualisierungszeit：2009-05-31 01:02:37

Ich habe vor ein paar Tagen plötzlich an diese Methode gedacht, als ich ein dreispaltiges Layout mit CSS geschrieben habe. Diese Idee kommt mir etwas verrückt vor. Wenn etwas daran nicht stimmt, können Sie mir gerne einen Rat geben.

Wenn ich ein dreispaltiges Layout schreiben muss, verwende ich normalerweise die folgende DIV-Layoutmethode:

Die Verwendung einer solchen Verschachtelungsmethode kann zweifellos die Wahrscheinlichkeit von Codefehlern erheblich verringern, gleichzeitig ist ein solches Layout jedoch auch etwas kompliziert und für die spätere Wartung etwas unpraktisch. Eine Methode, die wir beim Layouten der Navigation häufig verwenden, ist die Verwendung der <ul>-Liste für das Layout. Die Navigation kann als mehrspaltiges Layout beschrieben werden. In diesem Fall können wir auch <ul> zum Layouten der Seite verwenden. Spaltenlayout.

Dies ist ein Layout mit fester Breite, was bedeutet, dass es noch nicht sehr flüssig ist. Ich werde es noch einmal versuchen, wenn ich Zeit habe.

<!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=“Content-Type“ content=“text/html charset=utf-8″ />
<title>UL für mehrspaltiges Layout verwenden</title>
<style type="text/css">
* {margin:0; padding:0;}
Körper {
Breite: 100 %;
Höhe: 100 %;
Hintergrund:#ddedfb;
}
#mainContent {
Breite:600px;
Rand: 10 Pixel automatisch;
}
#Kopfzeile,#Fußzeile {
Hintergrund:#8AC7FA;
Höhe:80px;
klar:beide;
}
#footer {
klar:beide;
padding-top:10px;
}
#Inhalt {
Höhe: 300 Pixel;
Rand: 10 Pixel automatisch;
}
#contentul {
Listenstil:none;
Höhe: 100 %;
}
#contentulli{
Breite: 150 Pixel;
Höhe: 100 %;
Hintergrund:#8AC7FA;
float:left;
}
#contentulli#li2 {
Breite:280px;
Rand:0 10px;
}
#content ul li#li2 ul li {
Breite:270px;
Höhe: 140 Pixel;
Rand: 5px;
Hintergrund:#0581F0;
}
</style>
</head>

<Körper>
<div id="mainContent">
<div id="header">Dies ist der Header</div>
<div id="content">
<ul>
<li>Dies ist die linke Seite</li>
<li id="li2″>
<ul>
<li>Dies ist der obere Teil der Mitte</li>
<li>Dies ist der untere Teil in der Mitte</li>
</ul>
</li>
<li>Das ist die rechte Seite</li>
</ul>
</div>
<div id="footer">Das ist die Unterseite</div>
</div>
</body>
</html>

Dieser Code kann unter IE7 und FF3 normal angezeigt werden. Er wurde nicht in anderen Browsern getestet. Wenn Sie eine bessere Methode haben, schlagen Sie diese bitte vor.