Heim >Web-Frontend >HTML-Tutorial >Wie erstelle ich einen statischen Fortschrittsbalken in HTML? (Beispiel)
Wie erstelle ich einen statischen Fortschrittsbalken in HTML? (Beispiel)
- 藏色散人Original
- 2018-08-14 15:48:566211Durchsuche
In diesem Artikel wird hauptsächlich die Implementierung eines statischen HTML-Fortschrittsbalkens vorgestellt. Dies kann durch die Kombination von HTML- und CSS-Code erreicht werden, was sehr einfach zu bedienen ist.
Beispiel für einen HTML-Fortschrittsbalkencode lautet wie folgt:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html静态进度条示例</title>
<meta charset="UTF-8">
<style type="text/css">
.mask{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
background-color: #eee;
}
.out{
margin:auto;
margin-top:20%;
text-align:center;
height:30px;
width:500px;
background-color: #fff;
border:1px solid #000;
position:relative;
}
.in{
position:absolute;
left:0px;
top:0px;
height:30px;
width:250px;
background-color: #ddd;
}
.num{
position:absolute;
left:0px;
top:0px;
height:30px;
line-height:30px;
width:500px;
text-align:center;
position:relative;
}
</style>
</head>
<body>
<div class="mask">
<div class="out">
<div class="in"></div>
<div class="num">50%</div>
</div>
</div>
</body>
</html>Der obige Code wird auf der Webseite wie unten gezeigt angezeigt:
wie gezeigt Anzeige, es gibt einen statischen Fortschrittsbalken auf der Seite und zeigt 50 % Fortschritt an. Da es sich um einen statischen HTML-Fortschrittsbalken handelt, ist es auch möglich, die Geschwindigkeit des HTML-Fortschrittsbalkens zu ändern, dh die Zahl zu ändern, solange der entsprechende Stil geändert wird. Das Prinzip hier besteht tatsächlich darin, ein Div in zwei Teile zu teilen: Der eine ist der dunkle Teil, der den Fortschrittsbetrag angibt, und der andere ist der leere Teil, der den verbleibenden Betrag angibt. Legen Sie dann hauptsächlich den Stil des Fortschrittsteils fest, dh unterscheiden Sie die Farbbreite.
Haben Sie anhand der obigen Codebeispiele ein gewisses Verständnis für die Erstellung statischer HTML-Fortschrittsbalken? Ich hoffe, dieser Artikel kann Freunden in Not helfen.
Das obige ist der detaillierte Inhalt vonWie erstelle ich einen statischen Fortschrittsbalken in HTML? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!