資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中建立帶有影像專案符號的無序列表？
有序列表是有編號的，而無序列表沒有編號，它可以用標籤 <ul></ul> 建立，並使用標籤 <li></li> 定義列表的專案。我們可以在 HTML 中建立 4 種類型的無序列表 -
disc - 這將建立一個標記為專案符號（預設）的無序列表。
circle - 這將建立一個標記為圓圈的無序列表。
square - 這將建立一個標記為正方形的無序列表。
none - 這將建立一個沒有任何標記的無序列表。
語法
以下是使用正方形專案符號在 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>
示例 1
下面是一個在 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>
以下是上述示例程式的輸出。
示例 2
讓我們再看一個建立帶有影像專案符號的無序列表的示例 -
<!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>
執行上述程式碼後，將獲得以下輸出 -
更新於: 2022年10月18日
8K+ 閱讀量
廣告