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
Einführung in Javascript DOM, Knoten und Elementerfassung
Inhaltsverzeichnis DOM Knoten Elementknoten: Text...
Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung
XML-Dateien sollten so weit wie möglich in UTF-8 ...
So implementieren Sie die Kopierschutzfunktion für Webseiten (mit der Cracking-Methode)
Durch einen Rechtsklick auf die Quelldatei wird fo...
JavaScript zum Erreichen eines einfachen Bildwechsels
In diesem Artikel wird der spezifische Code für J...
Interpretation von 17 Werbewirksamkeitsmaßen
1. 85 % der Anzeigen werden nicht gelesen <br ...
Details zur Ereignisbindung reagieren
Inhaltsverzeichnis Ereignisbindung von Klassenkom...
Fünf Lösungen für Cross-Browser-Probleme (Zusammenfassung)
Kurz zusammengefasst: Browserkompatibilitätsprobl...
Sechs Möglichkeiten, die Größe von Docker-Images zu reduzieren
Seitdem ich 2017 mit der Arbeit an Vulhub begonne...
Installation und Verwendung von Apache-Stresstest-Tools
1. Herunterladen Gehen Sie zur offiziellen Apache...
Detaillierte Erklärung des Hash-Jump-Prinzips von Vue
Inhaltsverzeichnis Der Unterschied zwischen Hash ...
Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen von Minio und Java SDK
Inhaltsverzeichnis 1minio ist einfach 2 Docker er...
Gerätetreiber des Linux-Kernels – Zusammenfassung der grundlegenden Hinweise zum Linux-Kernel
1. Mechanismus des Linux-Kernel-Treibermoduls Sta...
Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen
In letzter Zeit stoße ich bei der Verwendung von ...
So überwachen Sie mehrere JVM-Prozesse in Zabbix
1. Szenariobeschreibung: Unsere Umgebung verwende...
Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3
Vorwort In der Demonstration [IE9-] ist der Farbv...