每个li前边图片的尺寸可以调整吗？

首页课程实战体系课手记专栏慕课教程

每个li前边图片的尺寸可以调整吗？

来源：10-1 列表样式

王小east

2022-07-05 08:15:34

写回答

1回答

好帮手慕小小

2022-07-05

同学你好，可以通过伪元素的方式实现改气li前图片尺寸。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		li {
			list-style: none;
		}

		li::before {
			content: "";
			/* 修改行内块尺寸，调整大小 */
			display: inline-block;
			width: 30px;
			height: 30px;
			margin: 10px;
			border-radius: 50%;
			/* 设置背景图片 */
			background: url(images/c11.jpg) no-repeat center;
			/* 调整背景图片尺寸 */
			background-size: 100% 100%;
			/* 设置元素的垂直对齐方式。 */
			vertical-align: middle;
			border: 1px solid #0000FF;
		}
	</style>
	</head>
	<body>
		<ul>
			<li>宝马530li</li>
			<li>奥迪A6L</li>
			<li>奔驰E300</li>
		</ul>
</html>

注：代码实现方式不唯一。

祝学习愉快~

0 学习 · 9886 问题

查看课程

相似问题

老师，我想咨询一下，为什么这儿列表的点默认在div外边啊？

回答 1

我设置的图片为什么只有一半？

回答 1

如何设置中间浮动的盒子居中呢？

回答 1

CSS入门中，为什么我输入“span*8”出来的是一整行，而不是视频中的8行？

回答 1

老师，无序列表用图片替换小圆点，怎么控制的图片大小

回答 1

打开慕课网App查看更多内容