CSS :
程序代码
<스타일>
#graphbox {
테두리 : 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 = "그래프 박스">
<H2> Bargraphs 예 </h2>
<div class = "Graph"> <span class = "Orange"Style = "너비 : 35%;"> 오렌지 : 35%</span> </div>
<div class = "Graph"> <span class = "green"style = "너비 : 90%;"> 녹색 : 90%</span> </div>
<div class = "그래프"> <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 = "width : 100%;"> black : 100%</span> </div>
</div>