作业:制作多彩照片墙页面代码
时间: 2024-10-17 08:12:07 浏览: 5
创建一个多彩照片墙页面的代码通常涉及前端HTML、CSS和JavaScript的结合。这里是一个简单的示例,用于展示如何用纯静态HTML结构配合CSS样式来实现基本的图片网格布局:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多彩照片墙</title>
<style>
.photo-wall {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px; /* 可以调整间距 */
padding: 10px;
box-sizing: border-box;
}
.photo {
width: 100%;
height: auto;
transition: transform 0.5s ease-in-out;
cursor: pointer;
}
.photo:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="photo-wall">
<!-- 添加每张图片 -->
<img src="image1.jpg" alt="图片1" class="photo">
<img src="image2.jpg" alt="图片2" class="photo">
<img src="image3.jpg" alt="图片3" class="photo">
<!-- 更多图片... -->
</div>
</body>
</html>
```
在这个例子中,`.photo-wall`是一个网格容器,`.photo`代表单张照片。通过CSS的grid布局,你可以轻松地添加并管理不同大小的照片,形成动态效果。图片的hover效果会使其放大,增加交互感。
阅读全文