Utilisez CSS pour obtenir des effets de graphique à barres de base_Échange d'expérience

Le graphique à barres CSS est une forme que l’on rencontre souvent dans la conception Web. Les graphiques à barres peuvent représenter visuellement des quantités sous forme de graphiques à barres.
Quelle est la méthode d'implémentation du graphique à barres de base en CSS ? Regardons l'exemple d'introduction suivant :

Copier le code Le code est le suivant :

< ;div class= "graph">
24% 🎜>
Il s'agit du code xhtml, qui définit un conteneur, applique un graphe de classe, qui inclut un élément xhtml fort, et applique une barre de classe à cet élément.
Regardons la définition CSS suivante :

Copier le code Le code est le suivant : .graph {

position : relative ; /* IE est stupide */

largeur : 200 px ;
bordure : 1px solide #B1D632 ;
remplissage : 2px ; .graph .bar {
affichage : bloc ;
position : relative ;
arrière-plan :
 alignement du texte : centre ;
couleur : #333 ; ;
line-height: 2em; Pour un graphique en forme de barre, nous utilisons style="width: 24%;" dans le code xhtml pour définir la taille de la zone définie. Un tel graphique à barres de base est complet !
Voyons l'effet opérationnel final :

24% <meta http-equiv="Content-Type" content="text/html; charset=gb2312">60%<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> <div class="graph"> <strong class="bar" style="width: 24%;"> </strong> </div>[Ctrl+A pour tout s茅lectionner Remarque