CSS:
程序代码
<style>
#graphbox {
الحدود: 1px الصلبة #e7e7e7 ؛
الحشو: 10 بكسل ؛
العرض: 250 بكسل ؛
لون الخلفية:#f8f8f8 ؛
الهامش: 5px 0 ؛
}
#Graphbox H2 {
اللون:#666666 ؛
Font-Family: Arial ؛
حجم الخط: 18 بكسل ؛
خط الرصيف: 700 ؛
}
.graph {
الموقف: قريب
خلفية اللون:#f0efef ؛
الحدود: 1px الصلبة #CCCCCC ؛
الحشو: 2px ؛
حجم الخط: 13px ؛
خط الرصيف: 700 ؛
}
.graph .orange ، .green ، .blue ، .red ، .black {
الموقف: قريب
محاذاة النص: اليسار ؛
اللون: #ffffff ؛
الارتفاع: 18 بكسل ؛
ارتفاع الخط: 18 بكسل ؛
Font-Family: Arial ؛
العرض: كتلة ؛
}
.graph .orange {background-color:#ff6600 ؛}
.graph .green {background-color:#66cc33 ؛}
.graph .blue {background-color:#3399cc ؛}
.red .red {background-color: Red ؛}
.graph .black {background-color:#555 ؛}
</style>
HTML:
程序代码
<div id = "graphbox">
<h2> مثال bargraphs </h2>
<div class = "graph"> <span class = "Orange" style = "Width: 35 ٪ ؛"> Orange: 35 ٪ </span> </viv>
<div class = "graph"> <span class = "green" style = "width: 90 ٪ ؛"> Green: 90 ٪ </span> </viv>
<div class = "graph"> <span class = "blue" style = "width: 75 ٪ ؛"> Blue: 75 ٪ </span> </viv>
<div class = "graph"> <span class = "red" style = "width: 85 ٪ ؛"> Red: 85 ٪ </span> </viv>
<div class = "graph"> <span class = "black" style = "العرض: 100 ٪ ؛"> أسود: 100 ٪ </span> </viv>
</div>