Heim >Web-Frontend >CSS-Tutorial >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:253695Durchsuche

So erzielen Sie mit CSS horizontale und vertikale Fortschrittsbalkeneffekte

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=&#39;width:30%;&#39;>30%</strong>
    </div>
</body>
</html>

Der Effekt ist wie folgt:

So erzielen Sie mit CSS horizontale und vertikale Fortschrittsbalkeneffekte

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=&#39;height:30%;&#39;>30%</strong>
    </div>
</body>
</html>

Implementierungsergebnisse:

So erzielen Sie mit CSS horizontale und vertikale Fortschrittsbalkeneffekte

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