Heim > Web-Frontend > CSS-Tutorial > So stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird

So stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird

WBOY
Freigeben: 2021-11-29 11:12:02
Original
30918 Leute haben es durchsucht

So zeigen Sie div am Ende der Seite an: 1. Fügen Sie den Stil „position:fixed;“ zum div-Element hinzu und legen Sie ihn als festen Positionierungsstil fest das div-Element und stellen Sie das div-Element auf den festen Positionierungsstil ein. Legen Sie den Abstand vom unteren Rand auf 0 fest, wodurch das div am unteren Rand der Seite fixiert wird.

So stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So zeigen Sie Div unten auf der Seite in CSS an

In CSS wird das Positionsattribut hauptsächlich zum Festlegen der Position des Div verwendet. Wenn Sie das Div unten anzeigen möchten, benötigen Sie Um das Positionsattribut des Div auf „fest“ (absolute Positionierung) zu setzen, setzen Sie das untere Attribut auf 0, um eine untere Anzeige zu erreichen.

Das Beispiel sieht wie folgt aus:

1 Erstellen Sie eine neue HTML-Datei und nennen Sie sie test.html, um zu erklären, wie das Div unten mit CSS angezeigt wird. Erstellen Sie ein Modul mit dem div-Tag und setzen Sie sein Klassenattribut auf mydiv, das hauptsächlich zum Festlegen des CSS-Stils über diese Klasse unten verwendet wird. Schreiben Sie das Tag und der CSS-Stil der Seite wird in das Tag geschrieben.

So stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird

2. Legen Sie im CSS-Tag den Stil für das Div über den Klassennamen mydiv fest, verwenden Sie width, um die Breite des Div auf 150 Pixel festzulegen, verwenden Sie Height, um die Höhe des Div auf 150 Pixel festzulegen, und verwenden Sie den Hintergrund um die Hintergrundfarbe des Div auf Rot zu setzen und color zu verwenden, setzen Sie die Textfarbe auf Weiß. Verwenden Sie Position, um die Position des Div festzulegen. Da das Div unten angezeigt werden soll, muss es auf „Fest“ (absolute Positionierung) eingestellt werden.

Setzen Sie im CSS-Tag den Abstand des Div auf 0 Pixel von der linken Seite der Seite bis zur linken Seite und setzen Sie ihn auf 0 bis unten, um das Div am unteren Rand der Seite zu fixieren.

So stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird

3. Öffnen Sie die Datei test.html im Browser, um den Effekt zu überprüfen.

So stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird

Zusammenfassung:

1. Erstellen Sie eine test.html-Datei.

2. Verwenden Sie in der Datei div, um ein Modul zu erstellen.

3. Stellen Sie die Breite und Höhe des Divs mit CSS ein, um eine absolute Positionierung des Divs zu erreichen, und setzen Sie dann unten den Wert 0, um das Div unten anzuzeigen.

Hinweis:

Zusätzlich zur Verwendung von „Fest“ können Sie auch „Absolut“ verwenden, um eine absolute Positionierung zu erreichen.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass div mit CSS unten auf der Seite angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage