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

Heim

Web-Frontend

CSS-Tutorial

Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen

Mar 21, 2018 pm 05:17 PM

css css3

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!

Erklärung dieser Website

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