Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

php中世界最好的语言Original: 2018-03-21 17:17:361874Durchsuche

Dieses Mal werde ich Ihnen die Verwendung von CSS3 zum Erstellen eines Fortschrittsbalkens vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS3 zum Erstellen eines Fortschrittsbalkens?

Dies ist nur eine kleine Demo, ein in CSS3 geschriebener Fortschrittsbalken.

Wie im Bild gezeigt:

Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

Der spezifische Code lautet wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"   />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
    width:100px;
    display:inline-block;
    *zoom:1;
}
.pb-wrapper
{
    border:1px solid #cfd0d2;
    position:relative;
    background:#cfd0d2;
    border-radius: 8px;
}
.pb-container
{
    height:12px;
    position:relative;
    left:-1px;
    margin-right:-2px;
    font:1px/0 arial;
    padding:1px;
}
.pb-highlight
{
    position:absolute;
    left:0;
    top:0;
    _top:1px;
    width:100%;
    opacity:0.6;
    filter:alpha(opacity=60);
    height:6px;
    background:white;
    font-size:1px;
    line-height:0;
    z-index:1
}
.pb-text
{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
    font:10px/12px arial;
    color:black;
    font:10px/12px arial
}
</style>
</head>
<body>
    <p class="process-bar skin-green">
        <p class="pb-wrapper">
            <p class="pb-highlight"></p>
            <p class="pb-container">
                <p class="pb-text">50%</p>
                <p class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></p>
            </p>
        </p>
    </p>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erläuterung der speziellen Verwendungstechniken von CSS-Rand

Die leicht zu verwechselnden Attribute von Rand und Polsterung

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementieren leuchtender quadratischer Ränder mit CSS3Nächster Artikel：Implementieren leuchtender quadratischer Ränder mit CSS3

In Verbindung stehende Artikel

Mehr sehen