CSS를 사용하여 기본 막대 차트 효과 얻기_경험 교환

CSS 막대 차트는 웹 디자인에서 자주 접하는 형식입니다. 막대 차트는 막대 그래프 형태로 수량을 시각적으로 나타낼 수 있습니다.
CSS에서 기본 막대 차트를 구현하는 방법은 무엇인가요? 다음 예제 소개를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

< ;div class= "graph">
24%

🎜>
컨테이너를 정의하고, xhtml 요소 Strong을 포함하는 클래스 그래프를 적용하고, 이 요소에 클래스 표시줄을 적용하는 xhtml 코드입니다.

다음 CSS 정의를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

.graph {

위치: 상대; /* IE는 바보입니다 */
너비: 200px
테두리: 1px 솔리드 #B1D632;
패딩: 2px; .graph .bar {
디스플레이:
위치: 상대;
텍스트 정렬:
높이: 2em; ;
line-height: 2em; 막대 모양의 그래픽의 경우 xhtml 코드에서 style="width: 24%;"를 사용하여 설정 영역의 크기를 정의합니다. 이렇게 기본적인 막대그래프가 완성되었습니다!
최종 작동 효과를 살펴보겠습니다.

24% <meta http-equiv="Content-Type" content="text/html; charset=gb2312">60%<title> </title> <style type="text/css"> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height: 2em; } .graph .bar span { position: absolute; left: 1em; } </style> <div class="graph"> <strong class="bar" style="width: 24%;"> </strong> </div>[氇