定位（子绝父相）、行内元素转换为块元素练习（电子相册、点击按钮切换图片）

最新推荐文章于 2023-03-29 17:20:23 发布

makelucky

最新推荐文章于 2023-03-29 17:20:23 发布

阅读量408

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/makelucky/article/details/90415040

版权

H5 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

第一种


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片切换</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:300px;
				height:300px;
				border:1px solid orange;
				margin:100px auto;
				position:relative;
			}
			.imgbox{
				overflow:hidden;
				width:300px;
				height:300px;
			}
			img{
				width:100%;
				height:300px;
			}
			.btnbox{
				width:300px;
				height:50px;
				background:#ccc;
				position:absolute;
				right:0;
				bottom:0;
			}
			a{
				background:black;
				display:block;
				width:55px;
				height:50px;
				color:white;
				text-decoration:none;
				float:left;
				margin-left:3px;
				text-align:center;
				line-height:50px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="imgbox">
				<img src="img1.jpg" id="img1"/>
				<img src="img2.jpg"  id="img2"/>
				<img src="img3.jpg"  id="img3"/>
				<img src="img4.jpg"  id="img4"/>
				<img src="img5.jpg"  id="img5"/>
			</div>
			<div class="btnbox">
				<a href="#img1">1</a>
				<a href="#img2">2</a>
				<a href="#img3">3</a>
				<a href="#img4">4</a>
				<a href="#img5">5</a>
			</div>
		</div>
	</body>
</html>

第二种


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>电子相册</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				background:#110f11;
			}
			.box{
				width:500px;
				height:400px;
				border:1px solid black;
				margin:100px auto;
				position:relative;
				background:#5c5a5c;
			}
			.imgbox{
				width:300px;
				height:200px;
				border:1px solid black;
				position:absolute;
				top:80px;
				left:20px;
				overflow:hidden;/*图片是超出隐藏，不是通过绝对定位实现单个显示*/
			}
			.imgbox img{
				width:300px;
				height:200px;
			}
			.btnbox{
				width:120px;
				height:200px;
				border:1px solid black;
				position:absolute;
				top:80px;
				right:20px;
				overflow:auto;
			}
			
			.btnbox a{
				width:100px;
				height:45px;
				display:block;
				margin-bottom:8px;
				background:red;
			}
			.btnbox img{
				width:100px;
				height:45px;
			}
			h1{
				width:500px;
				height:60px;
				position:absolute;
				top:0;
				left:0;
				color:#fcffff;
				line-height:60px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>电子相册</h1>
			<div class="imgbox">
				<img src="img1.jpg" id="img1" />
				<img src="img2.jpg" id="img2" />
				<img src="img3.jpg" id="img3" />
				<img src="img4.jpg" id="img4" />
				<img src="img5.jpg" id="img5" />
			</div>
			<div class="btnbox">
				<a href="#img1">
					<img src="img1.jpg" />
				</a>
				<a href="#img2">
					<img src="img2.jpg" />
				</a>
				<a href="#img3">
					<img src="img3.jpg" />
				</a>
				<a href="#img4">
					<img src="img4.jpg" />
				</a>
				<a href="#img5">
					<img src="img5.jpg" />
				</a>
			</div>
		</div>
	</body>
</html>