So kennzeichnen Sie die Quelle und Herkunft von CSS3-Zitaten

Wegen der Epidemie werde ich zu Hause fast schimmelig, also habe ich meinen Computer eingeschaltet und mein Gehirn benutzt. Heute werde ich Ihnen eine Methode zur Quelle und Herkunft von CSS3-Markup-Referenzen zeigen.

Das Aufkommen neuer Technologien geht häufig mit Produktivitätssteigerungen einher. Mit der Popularität von HTML5 und CSS3 ermöglichen uns immer mehr neue Methoden, Dinge einfach und problemlos zu lösen, für die früher sehr komplizierte Codes erforderlich waren. Beispielsweise haben Download und Platzhalter in HTML5 sowie Rechner und Zähler in CSS3 den Arbeitsaufwand von uns Webentwicklern enorm reduziert, da uns das Aufkommen dieser Features viel Aufwand erspart. Hier stelle ich Ihnen eine Methode vor, wie Sie mithilfe der Inhalts- und Attr-Technologie in CSS3 den Autor oder die Quelle des Zitats geschickt kennzeichnen können.

Wenn Sie in Ihrem Artikel eine andere Person zitieren oder eine Passage aus einem Buch zitieren, sollten Sie nach dem Zitat den Namen der Person oder den Titel des Buches angeben. Dies ist nicht nur eine Frage der Höflichkeit, sondern auch des Respekts. Normalerweise verwenden wir float:right, um die Quelle in der unteren rechten Ecke des Zitats anzuzeigen. Aber mit der Inhalts- und Attr-Technologie in CSS3 können wir dies intelligenter erreichen. Unten sehen Sie das durch CSS3 erzielte Effektdiagramm.

HTML Code

Es wird gesagt, dass Sanzang den Dämon aus der Höhle eskortierte und Mönch Sha näher kam und fragte: „Meister, kommen Sie heraus, wo ist Ihr Bruder?“

Bajie sagte: „Er hat einen Plan. Er wird den Meister definitiv durch jemand anderen ersetzen.“ Sanzang zeigte auf den Dämon und sagte: „

Dein älterer Bruder ist in seinem Bauch. „Bajie lachte und sagte: „Was machst du im Bauch? Komm raus!“

Der Affenkönig schrie von drinnen: „Mach deinen Mund auf und warte, bis ich rauskomme!“ Das Monster öffnete wirklich seinen Mund. Walker-Änderungen

Der Kleine steckte in seinem Hals fest und wollte gerade herauskommen, aber er hatte Angst, dass er ihn beißen würde, also holte er die Eisenstange heraus.

, blies einen Hauch Feenluft und rief: „Veränderung!“

Uns ist das „Cite“-Attribut beim Blockquote-Element aufgefallen. Anstatt ein separates Element zur Anzeige der Quelle zu verwenden, nutzen wir die Eigenschaften des Blockzitats selbst. Dies ist grammatikalisch klarer und einfacher und semantisch aussagekräftiger.

CSS Code

Als Nächstes müssen wir ein kleines CSS-Stück verwenden, damit der Inhalt im „Cite“-Attribut an der entsprechenden Stelle angezeigt wird. Dazu müssen wir in CSS3 „content“ und „attr“ verwenden:

blockquote[zitieren]:nach {

    Hintergrundfarbe: #666666;

    Rand: 1px durchgezogen #000000;

    Farbe: #EEEEEE;

    Inhalt: attr(zitieren);
    Anzeige: Block;
    Schriftgröße: kleiner;
    Schriftstil: normal;
    Polsterung: 0 0,2em;
      Position: absolut;
    rechts: 0,5em;
    }

Wir verwenden tatsächlich das Pseudoelement :after, um die Herkunftsinformationen anzuzeigen. Es werden keine zusätzlichen Webelemente hinzugefügt. Verwenden Sie die absolute Positionierung, um es in der unteren rechten Ecke zu positionieren. Dadurch wird auch ein gewisses Gefühl der Hierarchie vermittelt. Sehr schön.

Sofern an die gestellten Anforderungen nicht besonders hohe Anforderungen gestellt werden, ist diese Form der Angabe der Quelle bzw. Herkunft des Zitats sehr wirkungsvoll. Es gibt jedoch auch einige unpraktische Aspekte, beispielsweise müssen Sie einen Link zum Buch hinzufügen. Diese Verwendung wird in modernen Browsern unterstützt, darunter Firefox, Google Chrome und Apple Chrome. IE9 unterstützt diese Methode vollständig.

Zusammenfassen

Damit ist dieser Artikel über clevere Möglichkeiten zum Markieren des Ursprungs und der Quelle von CSS3-Referenzen abgeschlossen. Weitere relevante CSS3-Referenz- und Quellinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!