a 标签跳转轮播 css写成的轮播

最新推荐文章于 2023-11-10 21:06:58 发布

笔临

最新推荐文章于 2023-11-10 21:06:58 发布

阅读量779

点赞数

本文链接：https://blog.csdn.net/panhuanqin/article/details/81380910

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       #links>a{
       	padding: 10px;
       	border: 1px solid;
       	display: inline-block;
       }
       
       #content img{
       	position: absolute;
       	width: 400px;
       	height: 300px;
       	display: none;
       }
       #content img:target{
         display: block;
       }
	</style>
</head>
<body>
	<div id="links">
		<a href="#img1">img1</a>
		<a href="#img2">img2</a>
		<a href="#img3">img3</a>
		<a href="#img4">img4</a>
		<a href="#img5">img5</a>
	</div>
	<div id="content">
		<img id="img1"src="img/1.jpg" alt="" style="display: block;">
		<img id="img2"src="img/2.jpg" alt="">
		<img id="img3" src="img/3.jpg" alt="">
		<img id="img4"src="img/4.jpg" alt="">
		<img id="img5"src="img/5.jpg" alt="">
	</div>
</body>
</html>