012（图片切换案例）

最新推荐文章于 2024-09-25 15:27:18 发布

啊啊啊啊ly

最新推荐文章于 2024-09-25 15:27:18 发布

阅读量70

点赞数

分类专栏：每天一个小知识文章标签： markdown css css3

本文链接：https://blog.csdn.net/m0_46555090/article/details/121610216

版权

每天一个小知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

012（图片切换案例）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
		.showBox{
			width:500px;
			height:375px;
			border:1px solid skyblue;
			margin:50px auto;
			position:relative;
		}
		.showBox .picBox{
			width:500px;
			height:375px;
			overflow:hidden;
			/*溢出属性*/
		}
		.showBox .btnBox{
			position:absolute;
			right:15px;
			bottom:15px;
			/*添加绝对定位时，要给父标签添加relative*/
		}
		.showBox .btnBox a{
			/*a标签是行元素，不能加宽高，所以要变块元素，但需要同行显示，所以这里直接加浮动是一样的*/
			float:left;
			width:30px;
			height:30px;
			background:rgba(0,0,0,.5);
			text-decoration:none;
			color:#FFF;
			margin-right:5px;
			text-align:center;
			line-height:30px;
			/*上面两句第一句是文本水平居中，第二句是垂直居中*/
		}
		.showBox .btnBox a:hover{
			background:rgba(0,0,0,1.0);
		}
	</style>
</head>
<body>
	<div class="showBox">
		<div class="picBox">
			<img src="../images/img04.jpg" alt="" id="img1">
			<img src="../images/img05.jpg" alt="" id="img2">
			<img src="../images/img06.jpg" alt="" id="img3">
			<img src="../images/img07.jpg" alt="" id="img4">
		</div>
		<div class="btnBox">
			<a href="#img1">1</a>
			<a href="#img2">2</a>
			<a href="#img3">3</a>
			<a href="#img4">4</a>
		</div>
	</div>
</body>
</html>

图片可更换为自己的图片