CSS:
程序代码
<estilo>
#graphbox {
borde: 1px Solid #E7E7E7;
relleno: 10px;
Ancho: 250px;
Color de fondo:#F8F8F8;
margen: 5px 0;
}
#Graphbox H2 {
Color:#666666;
Font-Family: Arial;
tamaño de fuente: 18px;
Font-peso: 700;
}
.gráfico{
Posición: relativo;
Color de fondo:#f0Efef;
borde: 1px sólido #ccccccc;
relleno: 2px;
tamaño de fuente: 13px;
Font-peso: 700;
}
.Graph .orange, .Green, .Blue, .red, .Black {
Posición: relativo;
text-align: izquierda;
Color: #ffffff;
Altura: 18px;
Línea de altura: 18px;
Font-Family: Arial;
Pantalla: bloque;
}
.Graph .Orange {Color de fondo:#FF6600;}
.Graph .Green {Background-Color:#66CC33;}
.Graph .Blue {Background-Color:#3399cc;}
.Graph .red {de fondo de fondo: rojo;}
.Graph .Black {Background-Color:#555;}
</style>
HTML:
程序代码
<div id = "Graphbox">
<h2> Bargraphs Ejemplo </h2>
<div class = "Graph"> <span class = "naranja" estilo = "ancho: 35%;"> naranja: 35%</span> </div>
<div class = "Graph"> <span class = "verde" style = "ancho: 90%;"> verde: 90%</span> </div>
<div class = "Graph"> <span class = "blue" style = "ancho: 75%;"> azul: 75%</span> </div>
<div class = "Graph"> <span class = "rojo" style = "ancho: 85%;"> rojo: 85%</span> </div>
<div class = "Graph"> <span class = "Black" style = "Width: 100%;"> negro: 100%</span> </div>
</div>