Reines CSS, um die Textsymbolfunktion zu erreichen, indem das erste Zeichen der Zeichenfolge verwendet wird
|
So implementieren Sie Textsymbole über CSS
/*Symbolstil*/
.nav-icon-normal {
Breite: 32px;
Höhe: 32px;
Zeilenhöhe: 33px;
Anzeige: Inline-Block;
Rahmenradius: 6px;
Hintergrundfarbe: #b3b4c5;
vertikale Ausrichtung: Mitte;
Überlauf: versteckt;
Schriftgröße: 16px;
Texteinzug: 8px;
Textausrichtung: zentriert;
Buchstabenabstand: 8px;
Farbe: #fff;
Wörtertrennung: alles trennen;
}<div class="nav-icon-normal">Technologie ist die Grundlage</div> <div class="nav-icon-normal">Fähigkeit ist der Schlüssel</div> <div class="nav-icon-normal">Kommunikation ist das Wichtigste</div> <div class="nav-icon-normal">Allgemeine Schnittstelle</div> Effektvorschau
Damit ist zwar die Grundwirkung erreicht, allerdings kommt es trotzdem etwas zu kurz. So passen Sie die Hintergrundfarbe des Symbols an den Text an Sie können dieses Js lesen, um Farbwerte nach Namen zu extrahieren Wie wird es implementiert? Siehe hier. Der folgende Code wird in diesem Artikel nur als Beispiel verwendet. Die tatsächliche Verwendung muss entsprechend der tatsächlichen Situation angepasst werden.
var titles = ["Technologie ist die Grundlage", "Fähigkeit ist der Schlüssel", "Kommunikation ist das Wichtigste", "Universelle Schnittstelle"];
var html = "";
für (lass i = 0; i < Titel.Länge; i++) {
const Titel = Titel[i];
const color = extractColorByName(Titel);
html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', Farbe).replace('{1}', Titel);
}
// Ausgabedokument.write(html);
/**
* Farbe nach Namen extrahieren* @param name name*/
Funktion extractColorByName(name) {
vartemp = [];
temp.push("#");
für (let index = 0; index < name.length; index++) {
temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
}
gibt temp.slice(0, 5).join('').slice(0, 4); zurück.
}Der Effekt nach der Implementierung ist wie folgt
Zum Schluss fügen Sie den Fallcode hinzu
<!DOCTYPE html>
<html lang="de">
<Kopf>
<Stil>
/*Symbolstil*/
.nav-icon-normal {
Breite: 32px;
Höhe: 32px;
Zeilenhöhe: 33px;
Anzeige: Inline-Block;
Rahmenradius: 6px;
Hintergrundfarbe: #b3b4c5;
vertikale Ausrichtung: Mitte;
Überlauf: versteckt;
Schriftgröße: 16px;
Texteinzug: 8px;
Textausrichtung: zentriert;
Buchstabenabstand: 8px;
Farbe: #fff;
Wörtertrennung: alles trennen;
}
</Stil>
</Kopf>
<Text>
<Skripttyp="text/javascript">
var titles = ["Technologie ist die Grundlage", "Fähigkeit ist der Schlüssel", "Kommunikation ist das Wichtigste", "Universelle Schnittstelle"];
var html = "";
für (lass i = 0; i < Titel.Länge; i++) {
const Titel = Titel[i];
const color = extractColorByName(Titel);
html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', Farbe).replace('{1}', Titel);
}
// Test-HTML ausgeben
dokument.schreiben(html);
/**
* Farbe nach Namen extrahieren* @param name name*/
Funktion extractColorByName(name) {
vartemp = [];
temp.push("#");
für (let index = 0; index < name.length; index++) {
temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
}
gibt temp.slice(0, 5).join('').slice(0, 4); zurück.
}
</Skript>
</body>
</html>Zusammenfassen Damit ist der Artikel über die Verwendung von reinem CSS zur Implementierung von Textsymbolfunktionen durch Übernahme des ersten Zeichens einer Zeichenfolge abgeschlossen. Weitere relevante CSS-Inhalte zur Implementierung von Textsymbolen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Teilen Sie JS vier lustige Hacker-Hintergrundeffektcodes
>>: So betten Sie mithilfe von Iframe andere Webseiten in eine Webseite ein
Artikel empfehlen
JavaScript zur Implementierung der Webversion des Schlangenspiels
In diesem Artikel wird der spezifische Code für J...
Beispiel für den schnellen Aufbau einer LEMP-Umgebung mit Docker
LEMP (Linux + Nginx + MySQL + PHP) ist heutzutage...
1 Minute Vue implementiert Rechtsklickmenü
Inhaltsverzeichnis Rendern Installieren Code-Impl...
MySQL-Kodierung utf8 und utf8mb4 utf8mb4_unicode_ci und utf8mb4_general_ci
Referenz: MySQL-Zeichensatzübersicht utf8mb4 wurd...
Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte
1. Seitenanforderungen 1) Verwenden Sie standardm...
Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)
Swap deaktivieren Wenn auf dem Server ein Datenba...
Drei JavaScript-Methoden zur Lösung des Joseph-Ring-Problems
Inhaltsverzeichnis Überblick Problembeschreibung ...
Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung
Szenario: Die von uns häufig verwendeten Interakt...
Detaillierter Prozess der Vue-Front-End-Verpackung
Inhaltsverzeichnis 1. Verpackungsbefehl hinzufüge...
Reine JS-Methode zum Exportieren von Tabellen nach Excel
html <div > <button type="button&qu...
Beispiel für die Generierung von Zufallszahlen und die Verkettung von Zeichenfolgen in MySQL
Dieser Artikel beschreibt anhand eines Beispiels,...
Vue implementiert bidirektionale Datenbindung
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen
Vorwort: In MySQL wird die Funktion CONCAT() verw...
Was bedeutet es, nach der CSS-Linkadresse ein Fragezeichen (?) hinzuzufügen?
Zum Beispiel: <link rel="stylesheet" ...
Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript
Inhaltsverzeichnis 1. classList-Attribut 2. Prakt...