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
Praktisches Tutorial zum Ändern des MySQL-Zeichensatzes
Vorwort: In MySQL unterstützt das System viele Ze...
Implementierung von verschiebbaren Zeilen und Spalten sowie Auswahlspaltenkomponenten basierend auf der el-table-Kapselung
Wirkung Brauchen Sie eine Umgebung Ansicht elemen...
Zusammenfassung der schnellen Spaltenaddition bei MySQL 8.0 Online DDL
Inhaltsverzeichnis Problembeschreibung Historisch...
Professionelles und nicht-professionelles Webdesign
Zunächst einmal hängt die Gestaltung des Webseiten...
So lösen Sie das Problem, dass der Docker-Container keinen Vim-Befehl hat
Finden Sie das Problem Als ich heute versuchte, d...
Mysql löscht doppelte Daten, um die kleinste ID-Lösung beizubehalten
Suchen Sie online nach doppelten Daten und behalt...
Erstellen, Einschränkungen und Löschen von Fremdschlüsseln in MySQL
Vorwort Ab MySQL-Version 3.23.44 unterstützen Inn...
Eine kurze Diskussion über Flinks fehlertoleranten Mechanismus: Jobausführung und Daemon
Inhaltsverzeichnis 1. Fehlertoleranz bei der Joba...
Implementierungsmethode für den React State-Zustand und Lebenszyklus
1. Methoden zur Implementierung von Komponenten:組...
Detaillierte Erklärung zum Problem der CSS-Klassennamen
Die folgenden CSS-Klassennamen, die mit einer Zah...
Tutorial zur Tomcat-Konfiguration für Nginx/Httpd-Lastausgleich
Im vorherigen Blog haben wir über die Verwendung ...
Anleitung zum Zurücksetzen des MySQL/MariaDB-Root-Passworts
Vorwort Vergessene Passwörter sind ein Problem, d...
Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach
Swiper ist ein mit reinem JavaScript erstelltes P...
So konfigurieren Sie /var/log/messages im Ubuntu-Systemprotokoll
1. Problembeschreibung Heute muss ich die Systemp...
Vant Uploader implementiert die Drag-and-Drop-Funktion zum Hochladen von Bildern (als Cover festlegen)
Das Wirkungsdiagramm sieht wie folgt aus: <!DO...