创建一个图片画廊是一个很有趣的项目，它可以展示你的照片集合。以下是一个简单的HTML和CSS模板，你可以基于它创建一个图片画廊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片画廊</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: white;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gallery img {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
transition: transform 0.3s ease-in-out;
cursor: pointer;
}
.gallery img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<header>
<h1>图片画廊</h1>
</header>
<div class="container">
<div class="gallery">
<img src="image1.jpg" alt="照片1">
<img src="image2.jpg" alt="照片2">
<img src="image3.jpg" alt="照片3">
<img src="image4.jpg" alt="照片4">
<img src="image5.jpg" alt="照片5">
<img src="image6.jpg" alt="照片6">
</div>
</div>
</body>
</html>这个模板包括一个图片画廊，用户可以在其中浏览照片。每张照片都有一个缩放效果，鼠标悬停在照片上时会放大。
要创建你自己的图片画廊，你需要按照以下步骤进行：
- 复制上面的HTML代码到一个文本编辑器中。
- 将
<img>标签替换为你自己的照片，并设置src属性和alt属性。 - 保存文件并命名为
index.html。 - 将你的照片文件放在与HTML文件相同的目录中，或者根据需要更改
src属性以引用正确的文件路径。 - 使用浏览器打开这个HTML文件，查看你的图片画廊。