CSS:
程序代码
<Styles>
#graphbox {
Grenze: 1PX Solid #e7e7e7;
Polsterung: 10px;
Breite: 250px;
Hintergrundfarbe:#f8f8f8;
Rand: 5px 0;
}
#Graphbox H2 {
Farbe:#666666;
Schriftfamilie: Arial;
Schriftgröße: 18px;
Schriftgewicht: 700;
}
.Graph{
Position: Relativ;
Hintergrundfarbe:#f0efef;
Grenze: 1PX Solid #CCCCC;
Polsterung: 2px;
Schriftgröße: 13px;
Schriftgewicht: 700;
}
.Graph .orange, .green, .blue, .red, .black {
Position: Relativ;
Text-Align: links;
Farbe: #ffffff;
Höhe: 18px;
Zeilenhöhe: 18px;
Schriftfamilie: Arial;
Anzeige: Block;
}
.Graph .orange {Hintergrundfarbe:#ff6600;}
.Graph .green {Hintergrundfarbe:#66CC33;}
.Graph .Blue {Hintergrundfarbe:#3399cc;}
.Graph .red {Hintergrundfarbe: rot;}
.Graph .black {Hintergrundfarbe:#555;}
</style>
HTML:
程序代码
<div id = "graphbox">
<h2> Bargraphen Beispiel </H2>
<div class = "graph"> <span class = "orange" style = "width: 35%;"> orange: 35%</span> </div>
<div class = "graph"> <span class = "green" style = "width: 90%;"> grün: 90%</span> </div>
<div class = "graph"> <span class = "blau" style = "width: 75%;"> blau: 75%</span> </div>
<div class = "graph"> <span class = "rot" style = "width: 85%;"> rot: 85%</span> </div>
<div class = "graph"> <span class = "schwarz" style = "width: 100%;"> schwarz: 100%</span> </div>
</div>