Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3
|
Effektbild (wenn Sie ein Dreieck wünschen, klicken Sie bitte hier):
Code:
<html>
<Kopf>
<style type="text/css">
.Nachricht_s {
Position: relativ;
Cursor: Zeiger;
}
.message_s:nach {
Position: absolut;
Inhalt: "";
/*Der folgende Inhalt kann entsprechend dem tatsächlichen Bedarf angepasst werden-----Start------*/
oben: 0px;
left: -13px; /*Ändern in: right: -13px; Der Punkt wird rechts angezeigt*/
Breite: 8px;
Höhe: 8px;
Randradius: 50 %;
Hintergrundfarbe: #e98b7f;
/*-----Ende------*/
}
div {
Höhe: 30px;
Rand: 1px #000 durchgezogen;
Breite: 300px;
Zeilenhöhe: 30px;
Polsterung: 0px 0px 0px 15px;
}
</Stil>
<Skript>
Funktion clickAction()
{
console.log("Wenn der Himmel mir keinen Anführer gegeben hätte, wäre der Weg der Schlüssel so lang wie die Nacht gewesen!");
}
</Skript>
</Kopf>
<Text>
<div>
<span class="message_s" onclick="clickAction()"></span>
Das Schwert öffnet das Tor zum Himmel
</body>
</html>Anhang: Schauen wir uns das rote Dreiecksymbol in der oberen linken Ecke an. Die rote Dreiecksmarkierung wird in der oberen linken Ecke implementiert, wie in der Abbildung gezeigt
Die Implementierung erfolgt mithilfe von Pseudoklassen, wobei der Schwerpunkt auf den Attributen Position, Transformation und Rahmen liegt. Um die Position anzupassen, ändern Sie einfach die Werte oben und links.
<html>
<Kopf>
<title> Neues Dokument </title>
<Stil>
div {
Hintergrundfarbe: #f4f4f4;
Polsterung: 20px;
}
.Nachricht_s {
Position: relativ;
}
.message_s:nach {
Position: absolut;
oben: -25px;
Anzeige: Block;
Breite: 0;
Höhe: 0;
Rand: 16px durchgehend transparent;
Inhalt: "";
-webkit-transform: drehen(45 Grad);
}
.message_s:nach {
links: -25px;
Z-Index: 0;
Rahmenfarbe rechts: rot;
}
</Stil>
</Kopf>
<Text>
<div>
<span class="message_s">Internet Explorer 10, Firefox und Opera unterstützen das Transform-Attribut. Internet Explorer 9 unterstützt die alternative Eigenschaft -ms-transform (nur für 2D-Transformationen). Safari und Chrome unterstützen die alternative Eigenschaft -webkit-transform (3D- und 2D-Transformationen). Opera unterstützt nur 2D-Übergänge. </span>
</div>
</body>
</html>Damit ist dieser Artikel über die Verwendung von CSS3 zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke abgeschlossen. Weitere relevante Inhalte zu CSS3-Erinnerungspunkten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Detaillierte Erläuterung der JavaScript-Programmschleifenstruktur
>>: Detaillierte Erläuterung des Docker-Visualisierungsgrafiktools Portainer
Artikel empfehlen
Eine kurze Erläuterung zum Ändern/Festlegen der Umgebungsvariable JAVA_HOME unter Linux
1. Dauerhafte Änderung, gültig für alle Benutzer ...
JS implementiert ein zufälliges Namensaufrufsystem
Verwenden Sie JS, um ein zufälliges Namensaufrufs...
So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung
Linux-Bibliothek generieren Die Linux-Version ver...
Detaillierte Erläuterung des MySQL-Clusters: Implementierung einer Master- und einer Slave-Architektur
Experimentelle Umgebung: 1. Drei CentOS 7-Server ...
Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive
Inhaltsverzeichnis 1. Verwenden Sie Plugin-Ausdrü...
React-Methode zum Anzeigen von Daten auf Seiten
Inhaltsverzeichnis Übergeordnete Komponente „list...
Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten
Inhaltsverzeichnis 1. So erhalten Sie unterschied...
Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18
MySql herunterladen 1. Öffnen Sie die offizielle ...
30 kostenlose hochwertige englische Ribbon-Schriftarten
30 kostenlose englische Ribbon-Schriftarten in hoh...
Detaillierte Schritte zur Konfiguration der Linux-Firewall (basierend auf der Yum-Warehouse-Konfiguration)
Vorwort Dieses Experiment bereitet zwei virtuelle...
React realisiert sekundäre Verknüpfung (linke und rechte Verknüpfung)
In diesem Artikel wird der spezifische Code von R...
VM VirtualBox virtuelle Maschine mounten freigegebenen Ordner
Eine Umgebung Installieren Sie VMware Tools auf C...
Detaillierte Erläuterung der SSHD-Dienste und Dienstverwaltungsbefehle unter Linux
sshd SSH ist die Abkürzung für Secure Shell, ein ...
CSS zum Erzielen eines Chat-Blaseneffekts
1. Rendern JD-Effekt Simulationseffekt 2. Grundsa...
So fügen Sie in MySQL 8.0 schnell Spalten hinzu
Vorwort: Ich habe vor langer Zeit gehört, dass My...