Mit Hilfe von HTML und CSS können die Entwickler ihre Arbeit vorstellen, indem sie eine Fortschrittsleiste erstellen. Grundsätzlich wird es verwendet, um den Fortschritt des aktuellen Entwicklungsprojekts oder eines beliebigen Elements anzuzeigen. Darüber hinaus sind in HTML mehrere Methoden verfügbar, um eine Fortschrittsleiste mit Hilfe des „“ -Tags zu erstellen, mit dem ein Indikator angezeigt wird, das den Abschlussschritt einer Aufgabe zeigt. Darüber hinaus können Sie über mehrere CSS -Eigenschaften einen Fortschrittsbalken machen.

Dieser Beitrag wird erklären:

• Was ist ein Fortschrittsbalken?
• Methode 1: So erstellen Sie eine Fortschrittsleiste, indem Sie ein HTML -Tag verwenden?
• Methode 2: So erstellen Sie eine Fortschrittsleiste, indem Sie die CSS -Eigenschaften verwenden?

Was ist ein Fortschrittsbalken?

Eine Fortschrittsleiste wird zur Darstellung eines grafischen Steuerelements verwendet, das zur Konzeption des Status eines erweiterten Computerbetriebs verwendet wird.

Methode 1: So erstellen Sie eine Fortschrittsleiste, indem Sie ein HTML -Tag verwenden?

Sehen Sie sich die folgenden Anweisungen an, um eine Fortschrittsbalken mit Hilfe von HTML zu erstellen.

Schritt 1: Erstellen Sie einen DIV -Behälter
Erstellen Sie zunächst einen Div -Container mit dem “Tag und geben Sie eine Klasse mit einem Namen nach Ihrer Wahl an.

Schritt 2: Überschrift hinzufügen
Setzen Sie eine Überschrift mit Hilfe des “ein

”Tag und Text für die Überschrift zwischen dem Überschriften -Tag hinzufügen.

Schritt 3: Erstellen Sie die Fortschrittsleiste
Jetzt fügen Sie eine "hinzu"”Tag zum Erstellen der Fortschrittsleiste. Geben Sie auch eine an “Wert”Der Fortschrittsbalken, die im Gange ist, und die“MaxDas Attribut wird zum Festlegen der maximalen Größe der Fortschrittsleiste verwendet:

Im Gange

Es kann beobachtet werden, dass wir erfolgreich eine Fortschrittsleiste erstellt haben:

Methode 2: So erstellen Sie eine Fortschrittsleiste, indem Sie die CSS -Eigenschaften verwenden?

Probieren Sie das genannte Verfahren aus, um eine Fortschrittsbalken mit CSS zu erstellen.

Schritt 1: Machen Sie einen DIV -Behälter
Erstellen Sie zunächst einen DIV -Behälter mit der “" Schild. Fügen Sie außerdem eine Klasse mit einem bestimmten Namen im Eröffnungs -Tag hinzu.

Schritt 2: Erstellen Sie einen weiteren Div -Container
Erstellen Sie als nächstes einen weiteren Behälter zwischen dem ersten Div -Container:

Schritt 3: Zugriff auf Div -Containerklasse
Greifen Sie mit Hilfe des DOT -Selektors und des Klassennamens als "den Klassennamen als" auf die Div -Containerklasse zu.ProgressBar-Div”Und wenden Sie die genannten Eigenschaften an:

.ProgressBar-div
Border-Radius: 10px;
Polsterung: 3px;
Rand: 50px;
Hintergrundfarbe: RGB (12, 4, 2);

Hier:

• “GrenzradiusEigenschaft definiert den Radius der Element -Ecke Außenrandkante. Benutzer können einen einzigen Radius für die Herstellung kreisförmiger Ecken festlegen.
• “PolsterungGibt den Raum innerhalb des definierten Randes um das Element an.
• “RandEigenschaft gibt einen Raum außerhalb der definierten Grenze an.
• “Hintergrundfarbe”Wird verwendet, um eine Farbe für den Hintergrund des Elements festzulegen.

Schritt 4: Machen Sie eine Fortschrittsleiste
Greifen Sie auf den inneren Div -Container zu und stylen Sie ihn wie folgt:

.ProgressBar-div> div
Hintergrundfarbe: RGB (210, 233, 5);
Breite: 50%;
Höhe: 30px;
Grenzradius: 12px;

Im obigen Code-Block:

• Der "BreiteDie Eigenschaft wird verwendet, um die Größe des Elements horizontal festzulegen.
• Nächste, "Höhe”Wird verwendet, um die Höhe des Elements zuzuweisen.
• “GrenzradiusEigenschaft zum Erstellen der abgerundeten Ecken.

Ausgang

Das ging darum, die Fortschrittsleiste mit HTML und CSS zu erstellen.

Abschluss

Um eine Fortschrittsleiste mit HTML und CSS zu erstellen, erstellen Sie zunächst einen verschachtelten Div -Container und fügen Sie das hinzu “" Element. Stylen Sie dann den ersten Div -Container, indem Sie die CSS -Eigenschaften anwenden, einschließlich “Grenzradius","Polsterung","Rand","Hintergrund", Und "Farbe”. Als nächstes style die innere DivBreite","Höhe", Und "Grenzradius”. In diesem Beitrag wurde erklärt.