Utilisez CSS3 pour créer une barre de progression-tutoriel CSS-php.cn

Utilisez CSS3 pour créer une barre de progression

php中世界最好的语言

Libérer： 2018-03-21 17:17:36

original

1820 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation de CSS3 pour créer une barre de progression. Quelles sont les précautions pour utiliser CSS3 pour créer une barre de progression. Ce qui suit est un cas pratique, jetons un coup d'œil.

Ceci est juste une petite démo, une barre de progression écrite en CSS3.

Comme indiqué sur l'image :

Utilisez CSS3 pour créer une barre de progression

Le code spécifique est le suivant :

<!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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des techniques d'utilisation spéciales de la marge CSS

Les attributs facilement confondus de la marge et du remplissage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!