【笔记】列表教程01——子弹的背景图像

最新推荐文章于 2024-12-30 15:16:09 发布

二木成林

最新推荐文章于 2024-12-30 15:16:09 发布

阅读量440

点赞数

分类专栏：笔记

笔记专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了如何使用CSS背景图像属性来替代HTML列表项目符号，包括删除默认项目符号、调整填充与边距、定位背景图像及调整内容间距，从而实现高度自定义的列表样式。

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

为什么要使用背景图像作为子弹？

CSS可用于将列表项目符号更改为正方形或圆形，但这对其外观或位置提供的控制非常少。

可以使用“list-style-image”将HTML项目符号替换为图形图像。但是，在大多数现代浏览器中，这些图像的放置不一致。对于子弹在列表项旁边的显示方式也很少有控制权。

一个更好的选择是使用子弹的背景图像。那么这是如何实现的呢？

第1步 - 制作基本清单

从基本的无序列表开始。列表项全部有效（包含在<a href="#"> </a>中）。但是，这不是必需的。对于此示例，“＃”用作虚拟链接。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">

	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

第2步 - 删除子弹

要删除HTML列表项目符号，请将“list-style-type”设置为“none”。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

第3步 - 删除填充和边距

标准HTML列表具有一定量的左缩进。每个浏览器的金额各不相同。有些浏览器使用填充（Mozilla，Netscape，Safari），其他浏览器使用边距（Internet Explorer，Opera）来设置缩进量。

要在所有浏览器中一致地删除此左缩进，请将“UL”的填充和边距都设置为“0”。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;/*new codes*/
			padding:0;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

步骤3a - 添加您自己的缩进

如果需要左缩进，请使用margin-left。由于填充现在设置为“0”，因此左边距可以给出一个精确的测量值，该测量值将在所有浏览器中保持一致。上面的示例使用“margin-left”设置为“1em”缩进。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			margin-left:1em;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

第4步 - 添加背景图像

使用“背景图像”将背景图像添加到“LI”元素。现在，在每个列表项的背景中重复背景图像- 不是很漂亮。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		li {
			background-image:url(arrow.gif);/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

第5步 - 设置不重复

要阻止背景图像在列表项下重复，请将“background-repeat”设置为“no-repeat”。现在每个列表项只有一个图像，但它们需要定位。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		li {
			background-image:url(arrow.gif);
			background-repeat:no-repeat;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

第6步 - 定位图像

“背景位置”用于定位图像，使它们与文本对齐。在这种情况下，使用“0.4em”。这些单位指的是“左”和“顶”的图像位置。

顶部位置可以设置为50％，这将使其位于列表项的中间。但是，如果列表项包裹两行或更多行，则这看起来不太好，因为图像将在行之间居中。最安全的方法是通过em定义顶部位置。使用此方法，无论用户指定的字体大小，图像都将始终与文本保持在一致。用于“左”和“顶”的实际测量值取决于图像。

现在，图像与内容水平排列。但是，内容位于图像的顶部。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		li {
			background-image:url(arrow.gif);
			background-repeat:no-repeat;
			background-position:0 .4em;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

第7步 - 移动内容

要将内容从背景图像移开，请将“padding-left”应用于“LI”元素。在这种情况下，使用了“0.6em”。与垂直对齐一样，列表填充将取决于图像的大小。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		li {
			background-image:url(arrow.gif);
			background-repeat:no-repeat;
			background-position:0 .4em;
			padding-left:0.6em;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

变化 - 右对齐列表

要制作列表的右对齐版本，只需要进行三次更改。首先，将“UL”“text-align”设置为“right”。其次，将左侧“背景位置”从“0”更改为“100％” - 这使图像与右边缘对齐。最后将“padding-left”更改为“padding-right”。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			text-align:right;/*new codes*/
		}
		li {
			background-image:url(arrow.gif);
			background-repeat:no-repeat;
			background-position:100% 0.4em;/*new codes*/
			padding-right:.6em;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

变化 - 设置列表宽度

如果列表不在包含框内，则可以使用“UL”来控制整个列表宽度。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			text-align:right;
			width:10em;/*new codes*/
		}
		li {
			background-image:url(arrow.gif);
			background-repeat:no-repeat;
			background-position:100% 0.4em;
			padding-right:.6em;
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

变化 - 在列表项周围添加空间

通过在“LI”上设置边距，可以在每个列表项之间添加空格。可以在每个列表项的顶部，底部或顶部和底部设置边距。此版本在列表项的顶部和底部具有“.1em”的边距。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			text-align:right;
			width:10em;
		}
		li {
			background-image:url(arrow.gif);
			background-repeat:no-repeat;
			background-position:100% 0.4em;
			padding-right:.6em;
			margin:1em 0;/*new codes*/
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">牛奶</a></li>
		<li><a href="#">蛋</a></li>
		<li><a href="#">起司</a></li>
		<li><a href="#">蔬菜</a></li>
		<li><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：

变化 - 图标列表

可以在单个列表中使用多个背景图像选项。这是通过为每个图标创建一个类，并根据需要设置单个“LI”的样式来实现的。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.iconlist
		{
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li.pdf
		{
			background-image: url(bullet_pdf.gif);
			background-repeat: no-repeat;
			background-position: 0 50%;
			padding: 3px 0 3px 20px;
			margin: .4em 0;
		}

		li.doc
		{
			background-image: url(bullet_doc.gif);
			background-repeat: no-repeat;
			background-position: 0 50%;
			padding: 3px 0 3px 20px;
			margin: .4em 0;
		}

		li.text
		{
			background-image: url(bullet_text.gif);
			background-repeat: no-repeat;
			background-position: 0 50%;
			padding: 3px 0 3px 20px;
			margin: .4em 0;
		}

		li.htm
		{
			background-image: url(bullet_htm.gif);
			background-repeat: no-repeat;
			background-position: 0 50%;
			padding: 3px 0 3px 20px;
			margin: .4em 0;
		}
	</style>
</head>
<body>
	<ul class="iconlist">
		<li class="pdf"><a href="#">牛奶</a></li>
		<li class="text"><a href="#">蛋</a></li>
		<li class="htm"><a href="#">起司</a></li>
		<li class="doc"><a href="#">蔬菜</a></li>
		<li class="text"><a href="#">水果</a></li>
	</ul>
</body>
</html>

效果图如下：