communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

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

WBOY
Libérer： 2016-05-16 12:06:59
original
1536 Les gens l'ont consulté

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 :










Étiquettes associées：
用CSS实现基本条状图表效果
source：php.cn
Article précédent：Filtre CSS pour obtenir un effet de trait de texte (FF et IE6 non pris en charge) Article suivant：Une idée pour agrandir et afficher une image à l'aide de l'échange CSS_Experience
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Créez un effet de survol qui transforme le bouton de menu en forme de X avec une version clone ombré Tout d'abord, je tiens à admettre que mon titre prête à confusion et j'en suis désolé. Ce ...
Depuis 2024-04-04 11:55:21
0
2
315
Comment puis-je transformer le texte en un nouvel élément (comme un séparateur) lorsque je clique dessus ? J'essaie de trouver un moyen de faire en sorte que certains textes de la page se transform...
Depuis 2024-04-04 11:21:03
0
1
3580
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal