Carta bar CSS ialah satu bentuk yang sering kita temui dalam reka bentuk web. Carta bar boleh mewakili kuantiti secara visual dalam bentuk graf bar.
Apakah kaedah pelaksanaan carta bar asas dalam CSS? Mari lihat contoh pengenalan berikut:
< ;div class= "graph">
24% 🎜>
Ini ialah kod xhtml, yang mentakrifkan bekas, menggunakan graf kelas, yang termasuk elemen xhtml kuat dan menggunakan bar kelas pada elemen ini.
Mari lihat definisi CSS berikut:
kedudukan: relatif; /* IE adalah bodoh */
lebar: 200px;
sempadan: 1px pepejal #B1D632; .graph .bar {
paparan:
kedudukan:
latar belakang: #B1D632;
warna tengah: #333; ;
line-height: 2em; Untuk grafik berbentuk bar, kami menggunakan style="width: 24%;" dalam kod xhtml untuk menentukan saiz kawasan yang ditetapkan. Carta bar asas sedemikian lengkap!
Mari lihat kesan operasi akhir:
24%
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
