CSS:
程序代码
<style>
#Graphbox {
Border: 1px solide # e7e7e7;
rembourrage: 10px;
Largeur: 250px;
Color d'arrière-plan: # F8F8F8;
marge: 5px 0;
}
#Graphbox H2 {
Couleur: # 666666;
Font-Family: Arial;
taille de police: 18px;
Police-poids: 700;
}
.graphique{
Position: relative;
Color d'arrière-plan: # f0EFEF;
Border: 1px solide #cccccc;
rembourrage: 2px;
taille de police: 13px;
Police-poids: 700;
}
.Graph .Orange, .Green, .Blue, .red, .Black {
Position: relative;
Texte-aligne: gauche;
Couleur: #ffffff;
hauteur: 18px;
hauteur de ligne: 18px;
Font-Family: Arial;
Affichage: bloc;
}
.Graph .Orange {fond de fond: # ff6600;}
.Graph .Green {Background-Color: # 66CC33;}
.Graph .Blue {Background-Color: # 3399cc;}
.graph .red {fond-couleur: rouge;}
.Graph .Black {fond de fond: # 555;}
</ style>
HTML:
程序代码
<div id = "graphbox">
<h2> Exemple de bargraphe </h2>
<div class = "graph"> <span class = "orange" style = "width: 35%;"> orange: 35% </span> </div>
<div class = "graph"> <span class = "green" style = "width: 90%;"> vert: 90% </span> </div>
<div class = "graph"> <span class = "blue" style = "width: 75%;"> bleu: 75% </span> </div>
<div class = "graph"> <span class = "red" style = "width: 85%;"> rouge: 85% </span> </div>
<div class = "graph"> <span class = "noir" style = "width: 100%;"> noir: 100% </span> </div>
</div>