数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
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+ 次浏览
广告