CSS:
程序代码
<tyle>
#Graphbox {
Perbatasan: 1px solid #e7e7e7;
padding: 10px;
Lebar: 250px;
latar belakang-warna:#f8f8f8;
Margin: 5px 0;
}
#graphbox h2 {
Warna:#666666;
Font-Family: Arial;
font-size: 18px;
Font-Weight: 700;
}
.grafik{
Posisi: kerabat;
Latar Belakang-Color:#F0EFEF;
Perbatasan: 1px solid #cccccc;
padding: 2px;
font-size: 13px;
Font-Weight: 700;
}
.graph .Oordange, .green, .blue, .red, .black {
Posisi: kerabat;
Teks-Align: Kiri;
Warna: #FFFFFF;
Tinggi: 18px;
Line-Height: 18px;
Font-Family: Arial;
Tampilan: Blok;
}
.Graph .ORANGE {latar belakang-warna:#ff6600;}
.graph .green {latar belakang-warna:#66cc33;}
.graph .blue {latar belakang-warna:#3399cc;}
.graph .red {latar belakang-color: red;}
.graph .black {latar belakang-warna:#555;}
</tyle>
Html:
程序代码
<Div id = "Graphbox">
<H2> Contoh Bargraphs </h2>
<div class = "grafik"> <span class = "oranye" style = "width: 35%;"> oranye: 35%</span> </div>
<div class = "grafik"> <span class = "green" style = "width: 90%;"> green: 90%</span> </div>
<Div class = "grafik"> <span class = "blue" style = "width: 75%;"> Blue: 75%</span> </div>
<Div class = "grafik"> <span class = "red" style = "width: 85%;"> red: 85%</span> </div>
<div class = "grafik"> <span class = "black" style = "width: 100%;"> Black: 100%</span> </div>
</div>