HTML- 超美超简单的相册

最新推荐文章于 2025-03-11 12:23:40 发布

DaMeng1219

最新推荐文章于 2025-03-11 12:23:40 发布

阅读量4.6k

点赞数 5

分类专栏：前端萌妹子文章标签： html 相册

本文链接：https://blog.youkuaiyun.com/DaMeng1219/article/details/99690834

版权

前端萌妹子专栏收录该内容

5 篇文章

订阅专栏

HTML-> 超美超简单的相册

实现内容：

1.四张小图每次鼠标点击时大相册显示被点击的小图并且其它图片变灰色。（你也可以设置更多张相片）。

2.默认状态下展示第一张相片；

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				width: 500px;
				height: 600px;
				margin: auto;
				position: absolute;
				top: 100px;
				right: 0;
				bottom: 0;
				left: 0;
				padding:100px;
			}
			.container{
				position: relative;
				width: 410px;
				min-height:420px;
				/*background: whitesmoke;*/
				background:url(../img/10.jpg);
				background-repeat: round;
			}
			.container h1{
				width: 400px;
				height: 70px;
				color:  #E9967A;
				text-align: center;
			}
			ul{
				list-style: none;
				float: right;
				margin-right: 20px;
				margin-bottom: 100px;
			}
			.big{
				width: 240px;
				height: 240px;
				border: 1px dashed gray;
				border-radius: 5px;
				box-shadow: 2px 2px 5px gray;
				position: absolute;
				top:90px;
				left: 50px;
				display: none;
			}
			/*第一个big*/
			.first{
				/*z-index: 8888;*/
				display: block;
			}
			
			.small{
				width: 45px;
				height: 45px;
				border-radius: 50%;
				box-shadow: 2px 2px 5px #808080;
				/*透明度*/
				opacity: 0.4;
				
			}
			.container .small:hover+.big{
				display: block;
			}
			
			.one{
				opacity: 1;
			}
			
			.container ul:hover .small{
				opacity: 0.4;
			}
			.container ul li .small:hover{
				opacity: 1;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<h1>我的相册</h1>
			<ul>
				<li>
					<img src="../img/吴亦凡1.jpg" class="small one" />
					<img src="../img/吴亦凡1.jpg" class="big  first"/>
				</li>
				<li>
					<img src="../img/1.jpg" class="small" />
					<img src="../img/1.jpg" class="big"/>
				</li>
				<li>
					<img src="../img/aa.jpg" class="small" />
					<img src="../img/aa.jpg" class="big"/>
				</li>
				<li>
					<img src="../img/timg.jpg" class="small" />
					<img src="../img/timg.jpg" class="big"/>
				</li>
			</ul>
		</div>
	</body>
</html>

成果图展示：

在这里插入图片描述