Ich dachte plötzlich an diese Methode, als ich ein paar Tage in CSS ein dreispaliges Layout in CSS schrieb. Ich war ein bisschen verrückt nach dieser Idee. Wenn etwas daran falsch ist, geben Sie mir bitte einen Rat.
Wenn ich ein dreispaliges Layout schreiben muss, werde ich im Allgemeinen die folgende Div-Layout-Methode verwenden:
Abbildung 1 Div -Layout
Die Verwendung solcher Verschachtelungsmethoden kann zweifellos die Wahrscheinlichkeit von Codefehlern erheblich verringern, aber gleichzeitig ist ein solches Layout etwas kompliziert und für die spätere Wartung geringfügig unpraktisch. Wenn wir Navigation Layout-Layout verwenden, verwenden wir häufig eine Methode, bei der die Liste 〈ul〉 zum Layout verwendet wird, und die Navigation kann als mehrspaliges Layout beschrieben werden. Da dies der Fall ist, können wir auch 〈ul〉 verwenden, um die Seite mehrerer Spalten zu lagern.
Abbildung 2 Div -Layout
Dies ist ein Layout mit fester Breite, was bedeutet, dass die Liquidität nicht stark ist. Das Liquiditätslayout wurde noch nicht getestet. Ich werde es versuchen, wenn ich Zeit habe. Das Folgende ist der Code für dieses Layout:
<! 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-äquiv = content-type content = text/html; charSet = utf-8 ″ />
<title> Verwenden Sie UL für Multi-Säulen-Layout </title>
<style type = text/css>
* {Margin: 0; Polsterung: 0;}
Körper {
Breite: 100%;
Höhe: 100%;
Hintergrund: #ddedfb;
}
#MainContent {
Breite: 600px;
Rand: 10px Auto;
}
#Header,#Fußball {
Hintergrund:#8AC7FA;
Höhe: 80px;
klar: beides;
}
#footer {
klar: beides;
Padding-Top: 10px;
}
#Inhalt {
Höhe: 300px;
Rand: 10px Auto;
}
#Content ul {
Listenstil: Keine;
Höhe: 100%;
}
#Content ul li {
Breite: 150px;
Höhe: 100%;
Hintergrund:#8AC7FA;
float: links;
}
#Content ul li#li2 {
Breite: 280px;
Rand: 0 10px;
}
#Content ul li#li2 ul li {
Breite: 270px;
Höhe: 140px;
Rand: 5px;
Hintergrund:#0581f0;
}
</style>
</head>
<body>
<div id = mainContent>
<div id = header> Dies ist der Kopf </div>
<div id = content>
<ul>
<li> Dies ist die linke </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> Dies ist das Recht </li>
</ul>
</div>
<div id = footer> Dies ist das untere </div>
</div>
</body>
</html>
Dieser Code kann normalerweise unter IE7 und FF3 angezeigt werden. Andere Browser haben es nicht getestet. Wenn Sie eine bessere Methode haben, können Sie sie auch vorschlagen.