Heim >Web-Frontend >CSS-Tutorial >Einfacher Beispielcode zum Erstellen eines Fortschrittsbalkens mit CSS3
Einfacher Beispielcode zum Erstellen eines Fortschrittsbalkens mit CSS3
- 黄舟Original
- 2017-05-26 13:06:131243Durchsuche
In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von CSS3 zum Erstellen eines einfachen Fortschrittsbalkens(Demo) vorgestellt.
Dies ist nur eine kleine Demo benutzerfreundlicher Fortschrittsbalken geschrieben in CSS3.
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>Das obige ist der detaillierte Inhalt vonEinfacher Beispielcode zum Erstellen eines Fortschrittsbalkens mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erzielen Sie den Effekt eines kuchenförmigen Ladewartediagramms mit CSS (Bild)Nächster Artikel：So erzielen Sie den Effekt eines kuchenförmigen Ladewartediagramms mit CSS (Bild)