电商团购悬浮框

最新推荐文章于 2024-04-09 13:06:50 发布

weixiaosamoyed

最新推荐文章于 2024-04-09 13:06:50 发布

阅读量1k

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixiaosamoyed/article/details/122840208

版权

此任务45.背景图像定义列表项目符号，background：url（） no-repeat left center。
在这里插入图片描述
详细介绍看代码图：

代码块：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电商团购悬浮框</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.box1{
			width: 200px;
			height: 270px;
		    border: #613e72 5px solid;
			padding-top: 5px;
		    						
		}
		li {
			width: 150px;
			height: 40px;
			line-height: 40px;
			background: url("img/素材/icon.png") #613e72 no-repeat 3px center;
			padding-left: 30px;
			margin:0 auto 5px;
			color: #fff;
			
		}
	
		.la{
		    color: #613e72;
			background:url("img/素材/clock.png") no-repeat 3px center;
		}
		.lb{
		    color: #613e72;
			background:url("img/素材/back.png") no-repeat 3px center;
		}
	
	</style>
</head>

<body>
	<div class="box1">
	<ul>
		<li class="la">7月30日0：00开团</li>
		<li>新品团</li>
		<li>尝鲜团</li>
		<li>秒杀团</li>
		<li>清仓团</li>
		<li class="lb">返回顶部</li>
		</ul>
	</div>
</body>
</html>