CSS:
程序代码
<Stil>
#graphbox{
border:1px solid #e7e7e7;
Polsterung:10px;
Breite:250px;
Hintergrundfarbe:#f8f8f8;
Rand:5px 0;
}
#graphbox h2{
Farbe:#666666;
Schriftfamilie:Arial;
Schriftgröße:18px;
Schriftstärke:700;
}
.Graph{
Position:relativ;
Hintergrundfarbe:#F0EFEF;
border:1px solid #cccccc;
Polsterung:2px;
Schriftgröße:13px;
Schriftstärke:700;
}
.graph .orange, .grün, .blau, .rot, .schwarz{
Position:relativ;
text-align:left;
Farbe:#ffffff;
Höhe: 18px;
Zeilenhöhe:18px;
Schriftfamilie:Arial;
Anzeige:Block;
}
.graph .orange{Hintergrundfarbe:#ff6600;}
.graph .green{background-color:#66CC33;}
.graph .blue{background-color:#3399CC;}
.graph .red{Hintergrundfarbe:rot;}
.graph .black{background-color:#555;}
</style>
HTML:
程序代码
<div id="graphbox">
<h2>BarGraphs-Beispiel</h2>
<div class="graph"><span class="orange" style="width:35%;">orange:35%</span></div>
<div class="graph"><span class="green" style="width:90%;">green:90%</span></div>
<div class="graph"><span class="blue" style="width:75%;">blau:75%</span></div>
<div class="graph"><span class="red" style="width:85%;">red:85%</span></div>
<div class="graph"><span class="black" style="width:100%;">schwarz:100%</span></div>
</div>