Gunakan CSS untuk mencapai kesan carta bar asas_Pertukaran pengalaman

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:

Salin kod Kodnya adalah seperti 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:

Salin kod Kodnya adalah seperti berikut: .graf {

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%

60% <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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%;">[Ctrl+A untuk memilih semua Nota: </strong>Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan </div>]<div class="graph"></div>