Beispielcode zur Implementierung einer DIV-Aufhängung mit reinem CSS (feste Position)
|
Der DIV-Schwebeeffekt (feste Position) wird ausschließlich mit CSS implementiert und ist mit häufig verwendeten Browsern kompatibel: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, The World usw. Die Wirkung ist wie folgt:
Implementierungscode:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1" />
<title>Beispiel für eine DIV-Aufhängung – reine CSS-Implementierung</title>
<style type="text/css">
/*Stellen Sie die Höhe ein, Sie können nach oben und unten scrollen*/
Körper {
Höhe: 1800px;
Hintergrund:#dddddd;
}
/*allgemeiner div-Stil*/
div{
Hintergrund: #1a59b7;
Farbe: #ffffff;
Überlauf: versteckt;
Z-Index: 9999;
Position: fest;
Polsterung: 5px;
Textausrichtung: zentriert;
Breite: 175px;
Höhe: 22px;
Rahmen unten links – Radius: 4px;
Rahmen unten rechts – Radius: 4px;
Rahmen oben links – Radius: 4px;
Rahmen oben rechts – Radius: 4px;
}
/*obere rechte Ecke*/
div.rechts_oben{
rechts: 10px;
oben: 10px;
}
/*untere rechte Ecke*/
div.rechts_unten{
rechts: 10px;
unten: 10px;
}
/*Bildschirmmitte*/
div.center_{
rechts: 45%;
oben: 50 %;
}
/*obere linke Ecke*/
div.links_oben{
links: 10px;
oben: 10px;
}
/*linke untere Ecke*/
div.left_bottom{
links: 10px;
unten: 10px;
}
</Stil>
</Kopf>
<Text>
<div class="right_top">Ich bin das Div, das in der oberen rechten Ecke schwebt</div>
<div class="right_bottom"> Ich bin das Div, das in der unteren rechten Ecke schwebt</div>
<div class="center_">Ich bin das Div, das in der Mitte des Bildschirms schwebt</div>
<div class="left_top">Ich bin das Div, das in der oberen linken Ecke hängt</div>
<div class="left_bottom"> Ich bin das Div, das in der unteren linken Ecke hängt.</div>
</body>
</html>
Damit ist dieser Artikel über Beispielcode zur Implementierung von DIV-Suspendierung mit reinem CSS (feste Position) abgeschlossen. Weitere relevante CSS-DIV-Suspendierungsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Zwei Möglichkeiten zum Löschen von Floats in HTML
>>: Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript
Artikel empfehlen
Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen
1. addtime() Füge die angegebene Anzahl Sekunden ...
WeChat Mini-Programm: Position des Videofeuers zufällig
In diesem Artikel wird der spezifische Code zur z...
So erben Sie die CSS-Zeilenhöhe
Wie wird die Zeilenhöhe vererbt?Schreiben Sie ein...
Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können
Frage Lassen Sie mich zunächst über das Problem s...
So erzielen Sie mit CSS einen Daten-Hotspot-Effekt
Die Wirkung ist wie folgt: analysieren 1. Hier se...
Detaillierte Erklärung zur Verwendung des MySQL-Parameters sql_safe_updates in der Produktionsumgebung
Vorwort Im Falle eines Anwendungsfehlers oder ein...
Erläuterung unveränderlicher Werte in React
Inhaltsverzeichnis Was sind unveränderliche Werte...
Tutorial zur Installation des AutoFs-Mount-Dienstes unter Linux
Unabhängig davon, ob es sich um einen Samba-Diens...
Detaillierte Erläuterung der Vorgänge und Implementierungen im Zusammenhang mit dem HTML-Druck
Das Prinzip besteht darin, die Methode window.pri...
Tutorial-Diagramm zur Verwendung von Jenkins für die automatisierte Bereitstellung unter Windows
Heute werden wir darüber sprechen, wie wir Jenkin...
Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile
Inhaltsverzeichnis Vorwort 1. Ursache des Problem...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18
Lernziele: Lernen Sie, MySQL-Datenbanken unter de...
Sortierung und Paginierung von MySQL-Abfragen
Überblick Da wir die Daten normalerweise nicht di...
Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes
Manche Leute sind vielleicht noch nicht auf dieses...
Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial
Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...