CSS:
程序代码
<style>
#graphbox {
Граница: 1px solid #e7e7e7;
Заполнение: 10px;
Ширина: 250px;
фоновый цвет:#f8f8f8;
Полевая: 5px 0;
}
#graphbox H2 {
Цвет:#666666;
Семейство шрифта: ариальная;
размер шрифта: 18px;
шрифт-вес: 700;
}
.graph {
позиция: относительно;
фоновый цвет:#f0efef;
Граница: 1px solid #cccccc;
Заполнение: 2px;
размер шрифта: 13px;
шрифт-вес: 700;
}
.graph .orange, .green, .blue, .red, .black {
позиция: относительно;
Текст-альбом: слева;
Цвет: #ffffff;
Высота: 18px;
высота линии: 18px;
Семейство шрифта: ариальная;
дисплей: блок;
}
.graph .orange {founal-color:#ff6600;}
.graph .green {фоновый цвет:#66CC33;}
.graph .blue {founal-color:#3399cc;}
.graph .red {фоновый цвет: red;}
.graph .black {founal-color:#555;}
</style>
HTML:
程序代码
<div id = "Graphbox">
<h2> Пример Bargraphs </H2>
<div class = "graph"> <span class = "Orange" style = "ширина: 35%;"> Orange: 35%</span> </div>
<div class = "graph"> <span class = "green" style = "ширина: 90%;"> зеленый: 90%</span> </div>
<div class = "graph"> <span class = "blue" style = "ширина: 75%;"> синий: 75%</span> </div>
<div class = "graph"> <span class = "red" style = "ширина: 85%;"> red: 85%</span> </div>
<div class = "graph"> <span class = "black" style = "ширина: 100%;"> черный: 100%</span> </div>
</div>