Maison > Article > interface Web > Utilisez CSS3 pour créer une barre de progression
Utilisez CSS3 pour créer une barre de progression
- php中世界最好的语言original
- 2018-03-21 17:17:361892parcourir
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 :
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>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!