Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS horizontale und vertikale Fortschrittsbalkeneffekte
So erzielen Sie mit CSS horizontale und vertikale Fortschrittsbalkeneffekte
- 王林nach vorne
- 2020-05-19 09:08:253538Durchsuche
1. Der Implementierungscode des horizontalen Fortschrittsbalkens
<html>
<head>
<title>横向进度条</title>
<style type="text/css">
.loadbar
{
width:200px;
height:25px;
background-color:#fff;
border:1px solid #ccc;
}
.bar
{
line-height:25px;
height:100%;
display:block;
font-family:arial;
font-size:12px;
background-color:#bb9319;
color:#fff;
}
</style>
</head>
<body>
<div class="loadbar">
<strong class="bar" style='width:30%;'>30%</strong>
</div>
</body>
</html>Der Effekt ist wie folgt:
2. Implementierungscode des vertikalen Fortschrittsbalkens
<html>
<head>
<title>竖向进度条</title>
<style type="text/css">
.loadbar
{
width:25px;
height:200px;
background-color:#fff;
border:1px solid #ccc;
position:relative;
}
.bar
{
width:100%;
display:block;
font-family:arial;
font-size:12px;
background-color:#bb9319;
color:#fff;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div class="loadbar">
<strong class="bar" style='height:30%;'>30%</strong>
</div>
</body>
</html> Implementierungsergebnisse:
Empfohlenes Tutorial: CSS-Basis-Tutorial
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS horizontale und vertikale Fortschrittsbalkeneffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So erzielen Sie einen langen Schatteneffekt für Schriftarten in CSSNächster Artikel：So erzielen Sie einen langen Schatteneffekt für Schriftarten in CSS