列表使用图片作为标记类型

firstcode666

于 2021-10-06 20:18:22 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/firstcode666/article/details/120628968

这段代码展示了如何使用CSS来为无序列表<ul>中的每一项<li>设置背景图片作为列表图标，通过调整`background-image`, `background-repeat`, 和 `background-position`属性实现。简化后的代码使用`list-style`属性直接结合URL将图片设置为列表样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);a
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

如代码所示，使用图片作为背景的方式作为列表图标。

此段代码巧妙的使用padding- left对两个元素进行了布局定位。

上段代码还可以这样简化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>