Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen
Verwenden Sie CSS3, um einen Fortschrittsbalken zu erstellen
- php中世界最好的语言Original
- 2018-03-21 17:17:361898Durchsuche
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:
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>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!