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
Verwenden Sie CSS3s webkit-box-reflect geschickt, um verschiedene dynamische Effekte zu erzielen
In einem Artikel vor langer Zeit habe ich über di...
Super einfache Implementierung von Docker zum Erstellen eines persönlichen Blogsystems
Docker installieren Aktualisieren Sie das Yum-Pak...
So beheben Sie den abnormalen Fehler ERROR: 2002 in MySQL
Kürzlich ist beim Starten von MySQL ein Fehler au...
Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse
So kopieren Sie schnell eine Tabelle Erstellen Si...
JavaScript-Sandbox-Erkundung
Inhaltsverzeichnis 1. Szenario 2. Grundfunktionen...
Implementierungsbeispiel für den Linux-Befehl „tac“
1. Befehlseinführung Der Befehl tac (umgekehrte R...
Das jQuery-Framework implementiert drei Animationsmethoden zum Anzeigen und Ausblenden von Elementen
Inhaltsverzeichnis 1. Standardmäßig anzeigen und ...
Vollständige MySQL-Collapse-Abfrage, reguläre Übereinstimmung, ausführliche Erklärung
Überblick Im vorherigen Kapitel haben wir die Fil...
MySQL-Join-Abfragesyntax und Beispiele
Verbindungsabfrage: Es ist das Ergebnis der paarw...
Vorteile und Probleme des XHTML CSS Website Designs
XHTML ist die derzeit international verbreitete S...
Implementierung der Docker-Batch-Container-Orchestrierung
Einführung Der Dockerfile-Build-Ausführungsvorgan...
Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins
Inhaltsverzeichnis Vorwort wissen Übung macht den...
Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx
einführen Überwacht die Integrität von HTTP-Serve...
Vue basierend auf einer Element-Button-Berechtigungsimplementierungslösung
Hintergrundanforderungen: Das ERP-System muss ein...
Vue-Vorlagenkonfiguration und Webstorm-Codeformatspezifikationseinstellungen
Inhaltsverzeichnis 1. Einstellungen für die Spezi...