Wenn Sie die Tabellenentwurfsmethode verwenden, handelt es sich normalerweise um ein dreireihiges Layout mit oberen, mittleren und unteren Reihen. 
. Wenn ich DIV verwende, denke ich über die Verwendung von drei Spalten für das Layout nach, wie hier 
.
2. Definieren Sie den Körperstil
Definieren Sie zunächst den Stil des Hauptteils der gesamten Seite. Der Code lautet wie folgt:
body { MARGIN: 0px;
PADDING: 0px;
HINTERGRUND: url(../images/bg_logo.gif) #FEFEFE no-repeat rechts unten;
SCHRIFTFAMILIE: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
FARBE: #666;
SCHRIFTGRÖSSE:12px;
LINIENHÖHE:150% }
Die Funktion des obigen Codes wurde im Tutorial vom Vortag ausführlich erklärt, und jeder sollte sie auf einen Blick verstehen. Der Randrand ist als 0 definiert; die Hintergrundfarbe ist #FEFEFE, das Hintergrundbild ist in der unteren rechten Ecke der Seite, die Schriftgröße ist als 12px definiert; Farbe ist #666; die Linienhöhe beträgt 150 %.
3. Definieren Sie die Hauptabteilung
Als ich das CSS-Layout zum ersten Mal verwendete, entschied ich mich für ein dreispaltiges Layout mit fester Breite (das einfacher ist als das Design mit adaptiver Auflösung, hoho, sagen Sie nicht, ich sei faul, implementieren Sie zuerst ein einfaches, um etwas Vertrauen zu gewinnen !). Definieren Sie die Breite links, in der Mitte und rechts auf 200:300:280, wie folgt in CSS definiert:
/*Den Stil der linken Spalte der Seite definieren*/
#left{ WIDTH:200px;
RAND: 0px;
PADDING: 0px;
HINTERGRUND: #CDCDCD;
}
/*Spaltenstile auf der Seite definieren*/
#middle{ POSITION: absolut;
LINKS:200px;
TOP:0px;
BREITE:300px;
RAND: 0px;
PADDING: 0px;
HINTERGRUND: #DADADA;
}
/*Den Stil der rechten Spalte der Seite definieren*/
#right{ POSITION: absolut;
LINKS:500px;
TOP:0px;
BREITE:280px;
RAND: 0px;
PADDING: 0px;
HINTERGRUND: #FFF;
Hinweis: Ich habe POSITION: absolute; verwendet und dann LEFT:200px;TOP:0px; definiert. Dies ist der Schlüssel zu diesem Layout die absolute Positionierung der Ebene. Definieren Sie die mittlere Spalte so, dass sie 200 Pixel vom linken Rand der Seite und 0 Pixel vom oberen Rand entfernt ist. Definieren Sie die rechte Spalte so, dass sie 500 Pixel vom linken Rand der Seite und 0 Pixel vom oberen Rand entfernt ist.
Zu diesem Zeitpunkt lautet der Code der gesamten Seite:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<Kopf>
<title>Willkommen beim neuen „Web Designer“: Tutorials und Werbung für Webstandards</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="Copyright" content=" www.w3cn.org , freies Urheberrecht, jegliche Reproduktion" />
<meta name="description" content="Neuer Webdesigner, Tutorial-Site für Webstandards, fördert die Anwendung von Webstandards in China."
<meta content="Webstandards, Tutorials, Web, Standards, XHTML, CSS, Benutzerfreundlichkeit, Barrierefreiheit" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<Körper>
<div id="left">Linke Spalte der Seite</div>
<div id="middle">mittlere Spalte der Seite</div>
<div id="right">Rechte Spalte der Seite</div>
</body>
</html>
Zu diesem Zeitpunkt kann der Seiteneffekt nur drei nebeneinander liegende graue Rechtecke und ein Hintergrundbild erkennen. Aber ich möchte, dass die Höhe im Vollbildmodus angezeigt wird. Was soll ich tun?
4.100 % adaptive Höhe?
Um die drei Spalten auf der gleichen Höhe zu halten, habe ich versucht, „height:100%;“ in #left, #middle und #right festzulegen, stellte jedoch fest, dass überhaupt kein adaptiver Höheneffekt zu erwarten war. Nach einigen Versuchen musste ich jedem Div eine absolute Höhe zuweisen: „height:1000px;“, und als der Inhalt zunahm, musste ich diesen Wert ständig korrigieren. Gibt es keine Möglichkeit, die Höhe anzupassen? Als Ajie seine eigene Studie vertiefte, entdeckte er eine flexible Lösung. Tatsächlich besteht keine Notwendigkeit, 100 % zu setzen. Diese Methode wird im nächsten Abschnitt der Studie ausführlich vorgestellt.