Das Layout ist mit CSS einfach. Wenn Sie es gewohnt sind, Tabellenlayouts zu verwenden, wird es zunächst schwierig sein. Es ist nicht schwierig, es hat nur eine andere Motivation und ist in der Praxis sinnvoller.
Sie können jeden Abschnitt dieser Seite als separaten Abschnitt behandeln, unabhängig davon, welchen Abschnitt Sie auswählen. Sie können diesen Block absolut oder relativ durch diesen Block ersetzen.
DasPositionierungsattribut
position wird verwendet, um zu definieren, ob ein Element absolut, relativ, statisch oder fest ist.
Statische Werte sind die Standardwerte für Elemente, die in der normalen Reihenfolge generiert werden, wie sie in HTML erscheinen.
relative ist wie static, aber Sie können die Eigenschaften top, right, bottom und left verwenden, um die ursprüngliche Position zu versetzen.
Absolute trennt das Element vom normalen HTML-Fluss und schickt es in eine völlig eigene Positionierungswelt. In dieser etwas verrückten Welt kann dieses absolute Element überall platziert werden, solange die Werte oben, rechts, unten und links festgelegt sind.
„Fest“ verhält sich ebenfalls wie „absolut“, platziert aber absolute Elemente relativ zum Browserfenster relativ zur Seite, sodass feste Elemente theoretisch vollständig im Browser-Ansichtsfenster verbleiben, wenn die Seite gescrollt wird. Warum theoretisch? Wenn nichts anderes, funktioniert es gut in Mozilla und Opera, aber nicht im IE.
Verwenden des absoluten Positionierungslayouts
Sie können die absolute Positionierung verwenden, um ein traditionelles zweispaltiges Layout zu erstellen, indem Sie Regeln verwenden, die den folgenden in HTML ähneln:
Beispielquellcode [www.52css.com]
<div id="navigation">
<ul>
< li ><a href="this.html">Dies</a></li>
<li><a href="that.html">Das</a></li>
<li><a href= " theOther.html">Der Andere</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Willkommen im Ra ra Ra ra Banjo Banjo. Ra ra Banjo Banjo.</p>
<p>(Ra ra Banjo Banjo)
</p>
Und wenden Sie den folgenden CSS-
Code
an:#navigation {
position: absolute; left: 0
;
width
:
10em
}
Auf der linken Seite ist eine Navigationsleiste mit einer Länge von 10em eingestellt. Da die Navigation absolut positioniert ist, hat sie keinen Einfluss auf den Fluss der restlichen Seite. Sie müssen also lediglich die Breite des linken Randes des Inhaltsbereichs auf die Breite der Navigation einstellen Bar.
Es ist so einfach! Allerdings sind Sie durch diesen zweispaltigen Ansatz nicht eingeschränkt. Mit der intelligenten Positionierung können Sie so viele Blöcke anordnen, wie Sie benötigen. Wenn Sie beispielsweise eine dritte Spalte hinzufügen müssen, können Sie dem HTML einen „navigation2“-Block hinzufügen und das folgende CSS anwenden:
Beispielquellcode [www.52css.com]
#navigation {
position: absolute: 0; left: 0; width: 10em;
}
#navigation2 {
position: top: 0; right: 0; width:
0
10em
;
margin to 10em */
}
Der einzige Nebeneffekt der absoluten Positionierung von Elementen besteht darin, dass es keine Möglichkeit gibt, genau zu entscheiden, wo sie landen, da sie in ihrer eigenen Welt leben. Wenn Sie das obige Beispiel in einem weniger Navigations- und mehr Inhaltsbereich verwenden, ist das kein Problem, aber gerade bei der Verwendung relativer Werte für Länge und Breite muss man oft die Hoffnung aufgeben, so etwas wie Fußnoten darunter zu platzieren. Wenn Sie es wirklich tun möchten, anstatt sie absolut zu positionieren, schweben Sie sie.
Float
Floating verschiebt ein Element nach links oder rechts von derselben Zeile, während der umgebende Inhalt schwebend bleibt.
Floating wird oft verwendet, um kleine Elemente innerhalb einer Seite zu positionieren (im ursprünglichen Standard-CSS dieser Website ist der Link „nächste Seite“ des HTML Basic Guide und des CSS Basic Guide nach rechts verschoben. Siehe auch: First-in-Pseudoelemente (Beispiel eines Buchstabens), kann aber auch in größeren Blöcken, wie z. B. Navigationsspalten, verwendet werden.
Nehmen Sie das folgende HTML-Beispiel:
Beispielquellcode [www.52css.com]
#navigation {
float
: left; width
:
10em
}
#content
{
margin: 0 10em;
}
Wenn Sie nicht möchten, dass das nächste Element das schwebende Objekt umschließt, können Sie die Eigenschaft „clear“ verwenden. Clear: Left löscht das linke Element, Clear: Right löscht das rechte Element und Clear: Both löscht sowohl das linke als auch das rechte Element. Wenn Sie beispielsweise eine Seitenfußzeile benötigen, können Sie dem HTML einen Block mit der ID „footer“ hinzufügen und dann das folgende CSS verwenden:
Beispielquellcode [www.52css.com]
#footer {
clear: Both;
}
Nun, Sie haben es verstanden. Unter allen Spalten wird eine Fußnote angezeigt, unabhängig von der Länge einer Spalte.
Beachten Sie, dass
wir Positionierung und Floating im Allgemeinen behandelt haben, wobei der Schwerpunkt auf den „großen“ Blöcken der Seite liegt. Bedenken Sie jedoch, dass diese Methoden auch für jedes Element innerhalb dieser Blöcke verwendet werden können. Durch die Kombination von Positionierung, Floating, Rändern, Auffüllung und Rändern können Sie jedes Layout-Design reproduzieren. Was das Layout angeht, gibt es bei Tabellen nichts, was ohne CSS auskommt.
Der einzige Grund für die Verwendung eines Tabellenlayouts besteht darin, dass Sie versuchen, alte Browser zu unterstützen. Hier zeigt CSS tatsächlich seinen Fortschritt: Seiten mit hoher Benutzerfreundlichkeit haben nur einen Bruchteil der Dateigröße tabellenbasierter Seiten