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

Der Prozess der Installation und Konfiguration von Nginx in Win10

Unternehmenswebsite und Kolumnenwörterbuch Chinesisch-Englisch-Vergleich Freunde, die zweisprachige Unternehmenswebsites auf Chinesisch und Englisch erstellen, benötigen

Name Charakter Name Charakter Information Nachric...

Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3

Der Prozess der Installation und Konfiguration von Nginx in Win10

Uniapp WeChat-Applet: Lösung bei Schlüsselfehler

Rendern im Vue-Scaffolding verstehen

Wie MLSQL Stack das Stream-Debugging vereinfacht

JS realisiert die automatische Wiedergabe der Timeline

Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen

Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen

JavaScript-Farbbetrachter

js behandelt die Kontoabmeldung beim Schließen des Browsers

JS-Funktionsaufruf, Anwenden und Binden einer superdetaillierten Methode

Artikel empfehlen

Detailliertes Installationstutorial von Docker unter CentOS

MySQL verwendet den Befehl truncate, um alle Tabellen in einer Datenbank schnell zu löschen

Tutorial zum Bereitstellen des Open-Source-Projekts Tcloud mit Docker auf CentOS8

5 häufig verwendete Objekte in JavaScript

webpack -v Fehlerlösung

Unternehmenswebsite und Kolumnenwörterbuch Chinesisch-Englisch-Vergleich Freunde, die zweisprachige Unternehmenswebsites auf Chinesisch und Englisch erstellen, benötigen

Vue setzt die Daten auf ihren ursprünglichen Zustand zurück

MySQL5.7.03 Ersatz der höheren Version durch MySQL 5.7.17 Installationsprozess und Lösungen für gefundene Probleme

Einführung in MySQL-Isolationsebene, Sperre und MVCC

Beispiel-Tutorial für geplante MySQL-Aufgaben

Eine kurze Analyse der Probleme mit JS-Originalwerten und Referenzwerten

Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen

So führen Sie .sh-Dateien im Linux-System aus

Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)

Implementierungsprinzip und Codebeispiele für die Komprimierungsdatei des Linux-Befehls gzip