CSS:
程序代码
<estilo>
#graphbox {
borda: 1px sólido #e7e7e7;
preenchimento: 10px;
Largura: 250px;
Background-Color:#f8f8f8;
margem: 5px 0;
}
#graphbox h2 {
Cor:#666666;
Fonte-família: Arial;
Size da fonte: 18px;
Peso da fonte: 700;
}
.gráfico{
Posição: relativa;
Background-Color:#F0EFEF;
borda: 1px sólido #cccccc;
preenchimento: 2px;
Size da fonte: 13px;
peso-fonte: 700;
}
.Graph .orange, .green, .blue, .red, .black {
Posição: relativa;
Alinhamento de texto: esquerda;
Cor: #ffffff;
Altura: 18px;
altura de linha: 18px;
Fonte-família: Arial;
exibição: bloco;
}
.Graph .orange {Background-Color:#ff6600;}
.Graph .Green {Background-Color:#66CC33;}
.Graph .Blue {Background-Color:#3399CC;}
.Graph .red {Background-Color: Red;}
.Graph .Black {Background-Color:#555;}
</style>
Html:
程序代码
<div id = "Graphbox">
<H2> Exemplo de barra de barra </h2>
<div class = "Graph"> <span class = "laranja" style = "width: 35%;"> laranja: 35%</span> </div>
<div class = "Graph"> <span class = "verde" style = "width: 90%;"> verde: 90%</span> </div>
<div class = "Graph"> <span class = "blue" style = "width: 75%;"> azul: 75%</span> </div>
<div class = "Graph"> <span class = "vermelho" style = "width: 85%;"> vermelho: 85%</span> </div>
<div class = "Graph"> <span class = "preto" style = "width: 100%;"> preto: 100%</span> </div>
</div>