Erstellen Sie einen einfachen statischen Fortschrittsbalken mit HTML und CSS (ausführliche Erklärung mit Bildern und Text)

Freunde, die häufig Websites durchsuchen oder häufig Seiten gestalten, sollten mit Fortschrittsbalken vertraut sein, und einige Fortschrittsbalken haben Animationseffekte, wenn die Seite aktualisiert wird. Freunde, die Front-End-Kenntnisse erlernen, werden HTML und CSS verwenden einfacher statischer Fortschrittsbalken? In diesem Artikel erfahren Sie, wie Sie mit HTML und CSS den Fortschrittsbalkeneffekt erzielen und schließlich den einfachen HTML-Fortschrittsbalkencode weitergeben. Interessierte Freunde können darauf verweisen.

Die Verwendung von CSS zum Erstellen eines einfachen Fortschrittsbalkens erfordert Grundkenntnisse in CSS, z. B. Randradius, abgerundete Ecken, Zentrierung usw. Wenn Sie sich nicht sicher sind, können Sie auf die entsprechenden Artikel auf der PHP-Chinese-Website verweisen , oder Besuchen Sie das CSS-Video-Tutorial und lernen Sie die Grundlagen gut kennen!

Beispiel: Verwenden Sie HTML und CSS, um einen einfachen statischen Fortschrittsbalken zu erstellen

HTML-Teil:

Wenn Sie den Fortschrittsbalken betrachten, können Sie feststellen, dass der Fortschrittsbalken aus zwei Teilen besteht , einer ist progress Die Gesamtlänge des Balkens, einer ist die Länge des Fortschritts, also erstellen wir zwei Divs, ein Div als übergeordnetes Element und das andere Div als untergeordnetes Element, und geben ihnen jeweils einen Klassennamen, um die Einstellung zu erleichtern Der spezifische Code lautet wie folgt:

<p>进度条</p>
<div class="container">
   <div class="skills loading">70%</div>
</div>

CSS-Teil:

Das Grundgerüst ist draußen, jetzt müssen Sie die beiden Divs formatieren. Stellen Sie die Länge des ersten Div auf 300 Pixel, die Höhe auf 30 Pixel und die Hintergrundfarbe auf #ddd ein. Aus ästhetischen Gründen können wir auch das Attribut „border-radius“ verwenden, um es abzurunden. Stellen Sie die Länge des zweiten Div auf 70 % ein. Dies ist der Wert des Fortschrittsbalkens. Geben Sie dem Div eine andere Farbe als das übergeordnete Element, um den Effekt besser erkennen zu können. Verwenden Sie abschließend line-height und text-align: zentrieren, um die Position horizontal und vertikal zu zentrieren, der spezifische Code lautet wie folgt:

.container {
    width: 300px;
    height: 30px;
    background-color: #ddd;
    border-radius: 20px;
   }
   
   .skills {
    line-height: 30px;
    color: white;
    border-radius: 20px;
    text-align: center;
    width: 70%;
    background-color: #4CAF50;
   }

Effektbild:

Wie aus dem Bild ersichtlich ist, Es wurde ein 70 % grüner Fortschrittsbalken erstellt.

Im Folgenden erfahren Sie, wie Sie mithilfe von HTML und CSS einen einfachen statischen Fortschrittsbalken erstellen. Dies ist relativ einfach und leicht zu verstehen Probieren Sie es aus und üben Sie es selbst, um zu sehen, ob Sie es können. Kann der Code die Wirkung des Fortschrittsbalkens zeigen? Ich hoffe, dieser Artikel kann Ihnen helfen!

Weitere verwandte Tutorial-Empfehlungen

1, CSS-Online-Handbuch

2, HTML-Video-Tutorial

3.Bootstrap-Video-Tutorial

Das obige ist der detaillierte Inhalt vonErstellen Sie einen einfachen statischen Fortschrittsbalken mit HTML und CSS (ausführliche Erklärung mit Bildern und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!