Une méthode simple d'implémentation de la barre de progression d'une page Web

Une barre de progression très simple

Elle peut être réalisée avec un simple attribut css : cilp

clip：rect(top,right,bottom,left
)

Écrivez d'abord un petit programme pour expliquer l'effet d'affichage

<style>        
.box {            
     width: 200px;           
     height: 20px;            
     background:#ccc;            
     border-radius:10px;           
     position:relative       
      }       
.clip {            
    position: absolute;            
    width: 100%;
   height: 100%;            
   clip: rect(0px,100px,20px,0px);            
   background: red;            
   border-radius:10px;        
   }    
   </style>
<p class=&#39;box&#39;>
    <span class=&#39;clip&#39;></span>
</p>

 :

Ajouter une position : absolue à .clip : 100% ; hauteur : 100 % ; par rapport à l'ajout d'une boîte de même largeur et hauteur à l'intérieur de la boîte, le fond est rouge

rect(top, droite, bas, gauche), par rapport à la zone affichée par le boîtier de commande, en changeant la valeur de la distance droite, la zone affichée devient plus grande

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!