Verwenden Sie CSS, um grundlegende Balkendiagrammeffekte zu erzielen_Erfahrungsaustausch

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:

Code kopieren Der Code lautet wie folgt:

< ;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

Der Code lautet wie folgt: .graph { position: relative; /* IE is dumb */

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 %

60 % <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height: 2em; } .graph .bar span { position: absolute; left: 1em; } </style> [Strg+A, um alle auszuw盲hlen. Hinweis: <div class="graph">Wenn Sie externe Js einf眉hren m眉ssen, m眉ssen Sie es aktualisieren, um es auszuf眉hren <strong class="bar" style="width: 24%;">]</strong> </div>