Wie auf einer Webseite eine Fußzeile setzen
Die meisten Websites enthalten Fußzeilen mit Informationen wie z. B. copyright Datumsangaben, "über uns" Informationen und Karrieremöglichkeiten. Zwar es, scheint als ob es, einfach genug sein sollte, um Elemente am unteren Rand der Seite platzieren, wird oft die Informationen je nach Größe des Browsers und den Umfang des Textes verschieben. Mit cascading Stylesheets (CSS) und Divs, erstellen Sie eine einfache Fußzeile, die den Aufenthalt am unteren Rand der Seite unabhängig von der Fenstergröße und der Inhalt Menge.
Anweisungen
1 Legen Sie den Körper Höhe und Container-Klasse. In den CSS-Stil festgelegt Blatt die Klassen "html" und "Körper" zu 100 Prozent Höhe. Fügen Sie eine Containerklasse "" und legen Sie die min-Höhe auf 100 Prozent, Höhe automatisch! wichtig, Höhe bis 100 Prozent und Marge auf 0 Auto negativ (Höhe).
Z. B. "html, Body {Height: 100 %;}" und ".container {min-Height: 100 %; Höhe: Auto! wichtig; Höhe: 100 %; Marge 0 auto - 35px. "
2 Fügen Sie zwei Klassen für die Fußzeile. Eine Klasse wird die tatsächliche Fußzeile enthalten, während die andere Klasse am Rande außerhalb der Seite, um Platz für die Fußzeile erweitert. Legen Sie beide Klassen auf der gleichen Höhe. Z. B. ".footer {Höhe: 35px;}" und ".extender {Höhe: 35px;}"
3 Finden Sie die Indexnummer des CSS-Stil-Blatt. Kopieren Sie und fügen Sie den folgenden Code in Ihrem Stylesheet. Ändern Sie die Namen und Höhe wie gewünscht.
{Margin: 0;}HTML, Body {Height: 100 %;}.Wrapper {min-Height: 100 %; Height: Auto! wichtig; Höhe: 100 %; Margin: 0 auto - 35px;}.Footer {Höhe: 35px;}.Extender {Höhe: 35px;}
4 Fügen Sie diese Klassen in die Web-Seite. Geben Sie ein Div Container-Tag zwischen die öffnenden und schließenden Tag für den Körper. Geben Sie den Inhalt für die Webseite nach dem Starttag Container. Fügen Sie ein Div für die Extenderklasse nach Inhalt Endtag. Schließen Sie das Container-Tag nach dem Extender schließenden Tag. Fügen Sie ein Div für den Footer nach der Container Tag schließen die hinzu. Geben Sie den Inhalt für die Fußzeile. Schließen Sie das Fußzeile-Tag.
5 Finden Sie in den folgenden HTML-Code. Kopieren Sie und fügen Sie den folgenden Code in Ihre Website. Ändern Sie die Namen zu reflektieren Ihre tatsächlichen Klassen und Hinzufügen von Inhalt wie gewünscht.
< html >
<head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="container"> <p>Web Content</p> <div class="extender"></div> </div> <div class="footer"> <p>Footer Content </p> </div> </body>
< / html >