ซีเอสเอส:
程序代码
<สไตล์>
#กราฟบ็อกซ์{
เส้นขอบ:1px ทึบ #e7e7e7;
ช่องว่างภายใน:10px;
ความกว้าง:250px;
สีพื้นหลัง:#f8f8f8;
ระยะขอบ:5px 0;
-
#graphbox h2{
สี:#666666;
ตระกูลแบบอักษร: Arial;
ขนาดตัวอักษร:18px;
ตัวอักษร-น้ำหนัก: 700;
-
.กราฟ{
ตำแหน่ง:ญาติ;
สีพื้นหลัง:#F0EFEF;
เส้นขอบ: 1px ทึบ #cccccc;
ช่องว่างภายใน:2px;
ขนาดตัวอักษร:13px;
ตัวอักษร-น้ำหนัก: 700;
-
.graph .orange, .green, .blue, .red, .black{
ตำแหน่ง:ญาติ;
การจัดแนวข้อความ: ซ้าย;
สี:#ffffff;
ความสูง:18px;
ความสูงของบรรทัด:18px;
ตระกูลแบบอักษร: 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%;">orange: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>