Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen-CSS-Tutorial-php.cn

Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

php中世界最好的语言

Freigeben： 2018-03-21 17:17:36

Original

1874 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!