用html css js 做一个照片墙网页
时间: 2023-09-23 13:08:41 浏览: 51
好的,以下是一个简单的照片墙网页的 HTML、CSS 和 JavaScript 代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>照片墙</h1>
</div>
<div class="gallery">
<img src="img/photo1.jpg" alt="Photo 1">
<img src="img/photo2.jpg" alt="Photo 2">
<img src="img/photo3.jpg" alt="Photo 3">
<img src="img/photo4.jpg" alt="Photo 4">
<img src="img/photo5.jpg" alt="Photo 5">
<img src="img/photo6.jpg" alt="Photo 6">
<img src="img/photo7.jpg" alt="Photo 7">
<img src="img/photo8.jpg" alt="Photo 8">
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```
body {
background-color: #fff;
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
margin: 20px;
}
.gallery img {
width: 100%;
height: auto;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery img.active {
transform: scale(2);
}
```
JavaScript 代码:
```
// 点击图片放大
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
image.classList.toggle('active');
});
});
```
这个照片墙网页使用了相同的 HTML 代码和 CSS 样式来创建照片墙,并使用了 JavaScript 来实现点击图片放大。你可以将图片路径替换为自己的图片,然后将 HTML、CSS 和 JavaScript 代码保存为相应的文件,然后就可以在浏览器中打开查看效果了。