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%;"를 사용하여 설정 영역의 크기를 정의합니다. 이렇게 기본적인 막대그래프가 완성되었습니다!
최종 작동 효과를 살펴보겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
