CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken
|
Manchmal ist es schön, ein paar nette Scrollbar-Effekte zu sehen. Hier erkläre ich Ihnen, wie Sie CSS verwenden können, um 1. Horizontaler Fortschrittsbalken
<html>
<Kopf>
<title>Horizontaler Fortschrittsbalken</title>
<style type="text/css">
.Ladeleiste
{
Breite: 200px;
Höhe: 25px;
Hintergrundfarbe: #fff;
Rand: 1px durchgezogen #ccc;
}
.Bar
{
Zeilenhöhe: 25px;
Höhe: 100 %;
Anzeige:Block;
Schriftfamilie: Arial;
Schriftgröße: 12px;
Hintergrundfarbe: #bb9319;
Farbe: #fff;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Ladeleiste">
<strong class="bar" style='width:30%;'>30 %</strong>
</div>
</body>
</html>Die Wirkung ist wie folgt:
2. Vertikaler Fortschrittsbalken
<html>
<Kopf>
<title>Vertikaler Fortschrittsbalken</title>
<style type="text/css">
.Ladeleiste
{
Breite: 25px;
Höhe: 200px;
Hintergrundfarbe: #fff;
Rand: 1px durchgezogen #ccc;
Position: relativ;
}
.Bar
{
Breite: 100 %;
Anzeige:Block;
Schriftfamilie: Arial;
Schriftgröße: 12px;
Hintergrundfarbe: #bb9319;
Farbe: #fff;
Position: absolut;
unten: 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Ladeleiste">
30 %
</div>
</body>
</html>
Dies ist das Ende dieses Artikels über den Implementierungscode des horizontalen und vertikalen CSS-Fortschrittsbalkens. Weitere relevante Inhalte zum horizontalen und vertikalen CSS-Fortschrittsbalken finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Einführung in die Verwendung von Requisiten in Vue
Artikel empfehlen
Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling
Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...
CentOS 7.5 stellt Varnish-Cache-Serverfunktion bereit
1. Einführung in Varnish Varnish ist ein leistung...
CSS implementiert problemlos Container auf Blockebene mit festem Verhältnis
Beim Entwerfen eines H5-Layouts werden Sie normal...
SQL implementiert Additions-, Subtraktions-, Multiplikations- und Divisionsoperationen auf zwei benachbarten Datenzeilen
SQL implementiert Additions-, Subtraktions-, Mult...
JavaScript zum Erzielen eines Fensteranzeigeeffekts
In diesem Artikel wird der spezifische JavaScript...
Ein Artikel zum Verständnis der erweiterten Funktionen von K8S
Inhaltsverzeichnis Erweiterte Funktionen des K8S ...
Realisieren Sie Kartenaggregations- und Streueffekte basierend auf Vue + OpenLayer
Inhaltsverzeichnis Vorwort: Ergebnis: 1. Polymeri...
Detaillierte Erläuterung des Prozesses zum Abfragen von Benutzerberechtigungen mithilfe von MySQL-Anweisungen
Wie können Sie in MySQL die Berechtigungen anzeig...
So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation
1. Traditionelle Binlog-Master-Slave-Replikation,...
Antd + vue realisiert die Idee der dynamischen Überprüfung kreisförmiger Attributformen
Ich hoffe, einige Eigenschaften des Abfrageformul...
MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067
MySQL-Einstellungscode für grüne Version und Fehl...
Detaillierte Erläuterung der Leistungsoptimierung für MySQL-Batch-SQL-Einfügungen
Bei einigen Systemen mit großen Datenmengen beste...
Detaillierte Erklärung des Json-Formats
Inhaltsverzeichnis Ein JSON basiert auf zwei Stru...
So ändern Sie die Zeit in der virtuellen CentOS-Maschine
Das obere Bild zeigt die Systemzeit und das unter...
Tägliches automatisches Backup der MySQL-Datenbank mit mysqldump in Centos7 schreiben
1. Voraussetzungen: Die Datenbanksicherung ist be...