Petua Mentakrifkan Semula Peluru dan Penomboran CSS-tutorial css-php.cn

Petua Mentakrifkan Semula Peluru dan Penomboran CSS

PHPz

Lepaskan： 2018-09-28 10:57:51

asal

2590 orang telah melayarinya

Semua orang yang telah menggunakan Word tahu bahawa Word mempunyai fungsi "peluru dan penomboran", yang sangat mudah digunakan. Panel hartanah Dreamweaver3 juga mempunyai butang ikon serupa dengan "Peluru dan Nombor" yang menjana fungsi senarai automatik, tetapi ia hanya mempunyai dua bentuk, iaitu segi empat sama dan angka Arab. Walau bagaimanapun, kita boleh menggunakan fungsi definisi CSS Dreamweaver3 untuk mentakrifkan semula "format simbol senarai". Berikut mengambil takrifan "simbol senarai peluru angka Roman huruf besar" sebagai contoh untuk menggambarkan penggunaannya:

1 F7 (atau Klik ikon yang kelihatan seperti "Rajah Bagua" dalam bar pelancaran pantas), tunjukkan panel CSS, pilih "tiada", kemudian klik ikon edit di bahagian bawah panel, dan tekan butang "Baharu" pada kotak dialog "Edit Style Sheet" pop timbul , selepas memilih "Tag HTML (takrif semula tag HTML)" dalam kotak dialog "Gaya Baharu" pop timbul, pilih "ol" dalam kotak pilihan "Tag" di bawah, tekan OK, dan "Style Definition for ol" akan muncul serta-merta kotak dialog, seperti yang ditunjukkan di bawah:

Petua Mentakrifkan Semula Peluru dan Penomboran CSS

Pilih "senarai" dalam tetingkap pemilihan di sebelah kiri Kotak dialog "Definisi Gaya untuk ol", dan pada panel kanan kita hanya perlu menentukan Hanya "Jenis", klik butang segi tiga di sebelah kanan, anda boleh melihat senarai seperti yang ditunjukkan di bawah:

2. Biar saya terangkan maksud setiap item dalam senarai dalam gambar di atas:

cakera: bulatan pepejal; bulatan;

persegi: segi empat sama;

perpuluhan: digit perpuluhan; angka;

alfa rendah: huruf kecil Inggeris;

alfa atas: huruf besar Inggeris;

Jelas sekali, dalam contoh ini, pilih "upper-roman" dan kemudian tekan OK untuk kembali (perhatikan bahawa atribut "Bullet" tidak boleh dipilih sekarang, jika tidak, hasil yang dijangkakan mungkin tidak). Tamatkan dengan menekan butang "Selesai" pada kotak dialog "Edit Style Sheet". Kod CSS yang dilihat antara 〈head〉 dan 〈/head〉 kod sumber halaman web adalah seperti berikut:

Bagi netizen yang tidak menggunakan Dreamweaver3, salin terus kod di atas antara 〈head〉 dan 〈/head〉〈/head〉, kesannya adalah sama.

Dengan cara ini, apabila kami mereka bentuk halaman web, klik ikon nombor item

〈style type="text/css"〉
〈!--
ol { list-style-type: upper-romancircle}
--〉
〈/style〉

Salin selepas log masuk

untuk mendapatkan huruf besar Roman Terdapat senarai nombor, tetapi nombor perpuluhan masih dilihat semasa mengedit, dan warna sebenar mereka hanya dipaparkan semasa menyemak imbas. Jika anda memerlukan nombor dalam format lain, cuma pilih gaya lain dalam senarai dalam langkah kedua.

Jika anda ingin menekan ikon

, grafik di hadapan peluru (lalai ialah segi empat sama pepejal) juga akan ditukar kepada nombor berangka, asalkan yang pertama Apabila memilih tanda "Tag" dalam satu langkah, jangan pilih "ol" tetapi pilih "ul" sebaliknya. Jika anda ingin menukarnya menggunakan peluru angka Rom huruf besar, kod CSS yang terhasil adalah seperti ini:

Seperti yang anda boleh lihat dari sini, kedua-dua ikon ini pada dasarnya memainkan peranan yang sama, tetapi mempunyai label yang berbeza Itu sahaja.