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
CSS3-Mobil-Vw+Rem-Methode zum Erreichen eines reaktionsfähigen Layouts ohne Abhängigkeit von JS
1. Einleitung (1) Einführung in vw/vh Bevor wir s...
Der Prozess der Verwendung von vxe-table zum Erstellen bearbeitbarer Tabellen in Vue
Im Projekt gibt es eine Tabelle, die online bearb...
Informationen zum Konfigurationsproblem bei der Verbindung von MyBatis mit der MySql8.0-Version
Beim Erlernen von Mybatis ist mir ein Fehler aufg...
Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors
CSS-Selektoren Durch Festlegen des Stils für das ...
Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt
Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...
So richten Sie geplante Aufgaben in Linux und Windows ein
Inhaltsverzeichnis Linux 1. Grundlegende Verwendu...
Implementierung der Vorschaufunktion mehrerer Bild-Uploads auf HTML-Basis
Ich habe vor kurzem ein Skript zum Hochladen mehr...
Beispielcode zum Partitionieren und Formatieren einer Festplatte größer als 20 TB auf CentOS6
1. Konfiguration der Serverumgebung: 1. Überprüfe...
Vollständige Schritte zur Installation von mysql5.7 auf dem Mac (mit Bildern und Text)
Ich habe vor Kurzem ein Mac-System verwendet und ...
Vollständige Liste der CentOS7-Firewall-Betriebsbefehle
Inhaltsverzeichnis Installieren: 1. Grundlegende ...
HTML+CSS lässt Div-Tags Löschsymbole in der oberen rechten Ecke hinzufügen. Beispielcode
1. Anforderungsbeschreibung Zeigt das Löschsymbol...
Eine kurze Diskussion über die Lösung von Axios zum Entfernen doppelter Anfragen
Inhaltsverzeichnis 1. Doppelte Anfragen storniere...
Ubuntu startet den Remote-Anmeldevorgang des SSH-Dienstes
SSH-Secure-Shell, ermöglicht sichere Remote-Anmel...
Lösung zum Verhindern des Caching in Seiten
Lösung: Fügen Sie in <head> den folgenden Co...
Vue zeigt dynamisch den Wochentag an, der dem Datum entsprechend dem ausgewählten Monat entspricht
Wir, die bescheidenen Programmierer, müssen immer...