纯css label写轮播图

最新推荐文章于 2021-07-17 21:57:57 发布

最帅程序员

最新推荐文章于 2021-07-17 21:57:57 发布

阅读量697

点赞数

本文链接：https://blog.csdn.net/weixin_40222803/article/details/78049172

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
		*{padding: 0;margin: 0;}
		li{list-style: none}
		ul{width: 300px;height: 200px;position: relative;}
		div{width: 300px;height: 200px;position: absolute;left: 0;top: 0;display: none;}
		label{background: url(../images/banner-1-22.png) 0 0 no-repeat;display: block;height: 12px;width: 12px;z-index: 1;}
		.al1{position: absolute;left: 80%;top:80%;}
		.al2{position: absolute;left: 70%;top:80%;}
		.al3{position: absolute;left: 60%;top:80%;}
		.al4{position: absolute;left: 50%;top:80%;}
		input:checked + label{background: url(../images/banner-1-11.png) 0 0 no-repeat;}
		input:checked ~ div{display: block;}
	</style>
</head>
<body>
	<ul>
		<li>
			<input type="radio" id="a1" checked="checked" name="1">
			<label for="a1" class="al1">
			</label>
			<div class="ab1">
				<img src="../images/b1.png" alt="">
			</div>
		</li>
		<li>
			<input type="radio" id="a2" name="1">
			<label for="a2" class="al2">
			</label>
			<div class="ab2">
				<img src="../images/b2.png" alt="">
			</div>
		</li>
		<li>
			<input type="radio" id="a3" name="1">
			<label for="a3" class="al3">
			</label>
			<div class="ab3">
				<img src="../images/b3.png" alt="">
			</div>
		</li>
		<li>
			<input type="radio" id="a4" name="1">
			<label for="a4" class="al4">
			</label>
			<div class="ab4">
				<img src="../images/b4.png" alt="">
			</div>
		</li>
	</ul>
</body>
</html>

最帅程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
纯css label写轮播图

选项卡 *{padding: 0;margin: 0;} li{list-style: none} ul{width: 300px;height: 200px;position: relative;} div{width: 300px;height: 200px;position: absolute;left: 0;top: 0;display: none;} label{
复制链接

扫一扫