CSS를 사용하여 기본 막대 차트 효과 얻기_경험 교환
- WBOY원래의
- 2016-05-16 12:06:591561검색
CSS 막대 차트는 웹 디자인에서 자주 접하는 형식입니다. 막대 차트는 막대 그래프 형태로 수량을 시각적으로 나타낼 수 있습니다.
CSS에서 기본 막대 차트를 구현하는 방법은 무엇인가요? 다음 예제 소개를 살펴보겠습니다.
코드 복사 코드는 다음과 같습니다.
< ;div class= "graph">
24%
컨테이너를 정의하고, xhtml 요소 Strong을 포함하는 클래스 그래프를 적용하고, 이 요소에 클래스 표시줄을 적용하는 xhtml 코드입니다.
코드 복사 코드는 다음과 같습니다.
.graph { 위치: 상대; /* IE는 바보입니다 */
너비: 200px
테두리: 1px 솔리드 #B1D632;
패딩: 2px; .graph .bar {
디스플레이:
위치: 상대;
텍스트 정렬:
높이: 2em; ;
line-height: 2em; 막대 모양의 그래픽의 경우 xhtml 코드에서 style="width: 24%;"를 사용하여 설정 영역의 크기를 정의합니다. 이렇게 기본적인 막대그래프가 완성되었습니다!
최종 작동 효과를 살펴보겠습니다.
너비: 200px
테두리: 1px 솔리드 #B1D632;
패딩: 2px; .graph .bar {
디스플레이:
위치: 상대;
텍스트 정렬:
높이: 2em; ;
line-height: 2em; 막대 모양의 그래픽의 경우 xhtml 코드에서 style="width: 24%;"를 사용하여 설정 영역의 크기를 정의합니다. 이렇게 기본적인 막대그래프가 완성되었습니다!
최종 작동 효과를 살펴보겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.