Rumah > hujung hadapan web > html tutorial > Bagaimana untuk membuat senarai tidak teratur dengan simbol imej dalam HTML?

Bagaimana untuk membuat senarai tidak teratur dengan simbol imej dalam HTML?

WBOY
Lepaskan: 2023-09-06 15:49:15
ke hadapan
1712 orang telah melayarinya

Senarai tersusun bernombor, senarai tidak tersusun tidak bernombor, ia boleh dibuat menggunakan tag

    dan tag
  • digunakan untuk menentukan item senarai. Kita boleh membuat 4 jenis senarai tidak tersusun dalam HTML -
    • CD - Ini akan mencipta senarai tidak tertib yang ditandakan dengan bulet (lalai).

    • Kalangan- Ini akan membuat senarai tidak tersusun berlabel kalangan.

    • segi - Ini akan membuat senarai tidak tertib berlabel segi empat sama.

    • Tiada - Ini akan membuat senarai tidak tersusun tanpa sebarang teg.

      Bagaimana untuk membuat senarai tidak teratur dengan simbol imej dalam HTML?

    Tatabahasa

    Berikut ialah sintaks untuk mencipta senarai tidak tersusun dengan titik tumpu segi empat sama dalam HTML.

    <ul style="list-style-image: url(image.png)">
       <li>Item in list…</li>
       <li>Item in list…</li>
       <li>Item in list…</li>
    </ul>
    
    Salin selepas log masuk

    Contoh 1

    Diberikan di bawah adalah contoh mencipta senarai tidak tersusun dengan bulet imej dalam HTML.

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
       <ul style="list-style-image: url(images/11.png)">
          <li>Abdul</li>
          <li>Jason</li>
          <li>Yadav</li>
       </ul>
    </body>
    </html>
    
    Salin selepas log masuk

    Berikut ialah output program contoh di atas.

    Contoh 2

    Mari kita lihat satu lagi contoh mencipta senarai tidak tersusun menggunakan titik tumpu imej -

    <!DOCTYPE html>
    <html>
    <head>
       <title>HTML Unordered List</title>
    </head>
    <body>
       <h2>Tutorials</h2>
       <p>The list of tutorials:</p>
       <ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
          <li>Java</li>
          <li>C++</li>
          <li>Ruby</li>
       </ul>
    </body>
    </html>
    
    Salin selepas log masuk

    Selepas melaksanakan kod di atas, output adalah seperti berikut -

    Atas ialah kandungan terperinci Bagaimana untuk membuat senarai tidak teratur dengan simbol imej dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

  • sumber:tutorialspoint.com
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan