CSS:
程序代码
<стиль>
#графбокс{
граница: 1 пиксель сплошной #e7e7e7;
отступ: 10 пикселей;
ширина: 250 пикселей;
цвет фона: # f8f8f8;
поле: 5 пикселей 0;
}
#графбокс h2{
цвет: #666666;
семейство шрифтов: Arial;
размер шрифта: 18 пикселей;
вес шрифта: 700;
}
.граф{
положение: родственник;
цвет фона: # F0EFEF;
граница: 1 пиксель сплошной #cccccc;
отступ: 2 пикселя;
размер шрифта: 13 пикселей;
вес шрифта: 700;
}
.график .оранжевый, .зеленый, .синий, .красный, .черный{
положение: родственник;
выравнивание текста: по левому краю;
цвет: #ffffff;
высота: 18 пикселей;
высота строки: 18 пикселей;
семейство шрифтов: Arial;
дисплей: блок;
}
.graph .orange{цвет фона:#ff6600;}
.graph .green{цвет фона:#66CC33;}
.graph .blue{цвет фона:#3399CC;}
.graph .red{цвет фона:красный;}
.graph .black{цвет фона:#555;}
</стиль>
HTML:
程序代码
<div id="graphbox">
<h2>Пример гистограммы</h2>
<div class="graph"><span class="orange" style="width:35%;">оранжевый:35%</span></div>
<div class="graph"><span class="green" style="width:90%;">зеленый:90%</span></div>
<div class="graph"><span class="blue" style="width:75%;">синий:75%</span></div>
<div class="graph"><span class="red" style="width:85%;">красный:85%</span></div>
<div class="graph"><span class="black" style="width:100%;">черный:100%</span></div>
</div>