HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

1. HTML-Code

Code kopieren
Der Code lautet wie folgt:

Erfahrungspunkte:
<span class="Fortschrittsbalken"><b style="width:50px;"> </b></span>

2. CSS-Stile

Code kopieren
Der Code lautet wie folgt:

.progress-bar, .progress-bar b{Hintergrund: URL("/images/ico.png") kein wiederholtes Scrollen 0 0; Anzeige: Block;}
.progress-bar {Hintergrundposition: 0 0; Höhe: 15px;Breite: 430px;}
.progress-bar b {Hintergrundposition: 0 -17px; Höhe: 12px;}

Anhang:

<<:  Erste Schritte mit MySQL - Konzepte

>>:  So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)

Artikel empfehlen

Schritte zum Übertragen des neuen Kernels auf das Linux-System

1. Laden Sie das Ubuntu16.04-Image und den entspr...

Bringen Sie Ihnen bei, ein einfaches Versprechen Schritt für Schritt umzusetzen

Inhaltsverzeichnis Schritt 1: Erstellen Sie das F...

HTML-Tabellen-Markup-Tutorial (43): VALIGN-Attribut der Tabellenüberschrift

In vertikaler Richtung können Sie die Ausrichtung...

Zusammenfassung der Methoden zum Schreiben von Urteilsaussagen in MySQL

So schreiben Sie Urteilsaussagen in MySQL: Method...

Eine kurze Diskussion über die Verwendung der Web Storage API

Inhaltsverzeichnis 1. Lokale Speichertechnologie ...

MySQL-Indexprinzip und Analyse von Anwendungsbeispielen

Dieser Artikel veranschaulicht anhand von Beispie...

Beispielcode einer SVG-Schaltfläche basierend auf einer CSS-Animation

Der spezifische Code lautet wie folgt: <a href...

Richtige Methode zum Laden von Schriftarten in Vue.js

Inhaltsverzeichnis Schriftarten mit font-face ric...

Zusammenfassung der Wissenspunkte zum B-Tree-Index bei der MySQL-Optimierung

Warum müssen wir SQL optimieren? Wenn wir SQL-Anw...

HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails

1. Position : fest Gesperrte Position (relativ zu...

Zusammenfassung der Vorteile von Vue3 gegenüber Vue2

Inhaltsverzeichnis 1. Warum brauchen wir vue3? 2....

Probleme mit Index und FROM_UNIXTIME in MySQL

Null, Hintergrund Ich habe diesen Donnerstag viel...

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Inhaltsverzeichnis Ziehen Sie das Bild Ausführen ...

Natives JS zur Implementierung eines Klickzahlenspiels

Native JS implementiert das Klickzahlenspiel zu I...