html做简易相册
时间: 2023-07-20 20:10:21 浏览: 58
要制作一个简易的相册,你可以使用HTML和CSS来创建一个基本的网页布局,然后使用JavaScript来添加交互功能。
以下是一个简单的示例代码,其中包含一个包含图片的网格布局:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Photo Album</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
margin: 20px;
}
.photo {
position: relative;
overflow: hidden;
padding-bottom: 100%;
}
.photo img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.photo:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="container">
<div class="photo">
<img src="photo1.jpg">
</div>
<div class="photo">
<img src="photo2.jpg">
</div>
<div class="photo">
<img src="photo3.jpg">
</div>
<div class="photo">
<img src="photo4.jpg">
</div>
</div>
</body>
</html>
```
这个代码使用了CSS网格布局来创建一个包含多个图片的网格。每个图片都被包装在一个带有“photo”类的div中,并且使用绝对定位和padding-bottom属性来确保每个图像都具有相同的高度。当鼠标悬停在图像上时,使用CSS过渡效果将其放大到1.2倍。
你可以根据需要添加更多的图像和样式来完善你的相册。