数据结构
网络连接
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何利用 CSS 在列表中将图片作为列表项目标记添加进去？
CSS，即级联样式表的缩写，是一种结构简单的语言，可以更轻松地呈现网页。借助 CSS 就可以对网页应用样式。在本文中，我们将了解如何利用 CSS 将图片作为列表中列表项目的标记添加进去。
方法
我们将利用列表样式图像属性来完成这项任务。利用列表样式图像属性，用户可以将图片设置为列表中列表项目的标记。
语法
list-style-image: none | url | initial | inherit;
示例
步骤 1 − 首先，我们将定义 HTML 代码。
<!DOCTYPE html>
<html>
<head>
<title>How to add an image as the list-item marker in a list using CSS?</title>
</head>
<body>
<h4>How to add an image as the list-item marker in a list using CSS?</h4>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
步骤 2 − 现在，我们将添加 CSS 逻辑。
<style>
ul{
list-style-image: url("https://tutorialspoint.com/images/logo.png");
padding-left: 350px;
}
</style>
以下是完整代码 −
<!DOCTYPE html>
<html>
<head>
<title>How to add an image as the list-item marker in a list using CSS?</title>
<style>
ul {
list-style-image: url("https://tutorialspoint.com/images/logo.png");
padding-left: 350px;
}
</style>
</head>
<body>
<h4>How to add an image as the list-item marker in a list using CSS?</h4>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
结论
在本文中，我们了解了如何借助 CSS 中的列表样式图像属性，将图片作为列表中列表项目的标记。
更新时间： 2023-03-30
996 次浏览
广告