基于html的走廊照片墙
时间: 2023-10-16 16:11:10 浏览: 131
可以使用 HTML、CSS 和 JavaScript 来创建一个走廊照片墙。以下是一个简单的示例:
首先,在 HTML 中创建一个包含照片的 div:
```html
<div class="gallery">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
<img src="photo4.jpg">
<img src="photo5.jpg">
<img src="photo6.jpg">
</div>
```
然后,在 CSS 中设置 div 和 img 的样式以创建照片墙布局:
```css
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
object-fit: cover;
}
```
最后,在 JavaScript 中添加交互功能,例如当用户点击照片时将其放大:
```javascript
const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
image.addEventListener('click', () => {
image.classList.toggle('active');
});
});
```
完整的 HTML、CSS 和 JavaScript 代码示例可以参考下面的链接:
https://codepen.io/pen/?template=JjyYdJx