Comment créer une barre de progression statique en HTML ? (exemple)-tutoriel HTML-php.cn

Comment créer une barre de progression statique en HTML ? (exemple)

藏色散人

Libérer： 2018-08-14 15:48:56

original

6174 Les gens l'ont consulté

Cet article présente principalement comment implémenter la barre de progression statique HTML. Ceci peut être réalisé en combinant du code HTML et CSS, qui est très simple à utiliser.

Un exemple de code à barres de progression HTML est le suivant :

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

Copier après la connexion

Le code ci-dessus s'affichera sur la page Web comme indiqué ci-dessous :

Comment créer une barre de progression statique en HTML ? (exemple)

Comme le montre la figure, il y a une barre de progression statique sur la page et affiche une progression de 50 %. Puisqu'il s'agit d'une barre de progression statique HTML, il est également possible de modifier la vitesse de la barre de progression HTML, c'est-à-dire de changer le numéro, à condition que le style correspondant soit modifié. Le principe ici est en fait de diviser un div en deux parties, l'une est la partie sombre indiquant le montant de la progression et l'autre est la partie vide indiquant le montant restant. Ensuite, définissez principalement le style de la partie de progression, c'est-à-dire distinguez la largeur des couleurs.

A travers les exemples de code ci-dessus, avez-vous une certaine compréhension de la production de barres de progression statiques HTML ? J'espère que cet article pourra aider des amis dans le besoin.

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!