CSS:
程序代码
<style>
#graphbox {
ชายแดน: 1px Solid #E7E7E7;
Padding: 10px;
ความกว้าง: 250px;
พื้นหลังสี:#F8F8F8;
มาร์จิ้น: 5px 0;
-
#graphbox h2 {
สี:#666666;
Font-Family: Arial;
ขนาดตัวอักษร: 18px;
Font-Weight: 700;
-
.กราฟ{
ตำแหน่ง: ญาติ;
พื้นหลังสี:#f0efef;
ชายแดน: 1px Solid #CCCCCC;
Padding: 2px;
ขนาดตัวอักษร: 13px;
Font-Weight: 700;
-
.graph .orange, .Green, .Blue, .Red, .Black {
ตำแหน่ง: ญาติ;
TEXT-ALIGN: ซ้าย;
สี: #ffffff;
ความสูง: 18px;
ความสูงบรรทัด: 18px;
Font-Family: Arial;
แสดง: บล็อก;
-
.graph .Orange {พื้นหลังสี:#ff6600;}
.graph .Green {พื้นหลังสี:#66CC33;}
.graph .blue {พื้นหลังสี:#3399cc;}
.graph .ed {พื้นหลังสี: สีแดง;}
.graph .black {พื้นหลังสี:#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%;"> blue: 75%</span> </div>
<div class = "graph"> <span class = "red" style = "ความกว้าง: 85%;"> สีแดง: 85%</span> </div>
<div class = "graph"> <span class = "black" style = "ความกว้าง: 100%;"> ดำ: 100%</span> </div>
</div>