<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-gap: 20px;
}
.gallery img {
width: 200px;
height: 130px;
object-fit: cover;
border-radius: 50px; /* 圆角边框 */
box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 阴影 */
transition: transform 0.3s;
}
.gallery img:hover {
transform: scale(1.05); /* 鼠标悬停放大 */
}
</style>
</head>
<body>
<div class="gallery">
<img src="images/photo1.jpg" alt="photo1">
<img src="images/photo2.jpg" alt="photo2">
<img src="images/photo3.jpg" alt="photo3">
<img src="images/photo4.jpg" alt="photo4">
<img src="images/photo5.jpg" alt="photo5">
<img src="images/photo6.jpg" alt="photo6">
</div>
</body>
</html>
