CSS-Balkendiagramme sind eine Form, die uns im Webdesign häufig begegnet. Balkendiagramme können Mengen in Form von Balkendiagrammen visuell darstellen.
Was ist die Implementierungsmethode eines einfachen Balkendiagramms in CSS? Schauen wir uns die folgende Beispieleinführung an:
< ;div class= "graph">24% 🎜>
Dies ist XHTML-Code, der einen Container definiert, den Klassengraphen anwendet, der ein starkes XHTML-Element enthält, und die Klassenleiste auf dieses Element anwendet.
Schauen wir uns die folgende CSS-Definition an:
Code kopieren
width: 200px;
padding: 2px; .graph .bar {
Anzeige: Block;
Hintergrund: #B1D632;
Farbe: #333; ;
line-height: 2em; Für eine balkenförmige Grafik verwenden wir style="width: 24%;" um die Größe des eingestellten Bereichs zu definieren. Ein solches einfaches Balkendiagramm ist fertig!
Sehen wir uns den endgültigen Betriebseffekt an:
24 %
