HTML爱心照片墙源码
以下是一个简单的HTML爱心照片墙的示例代码。这个示例使用了HTML和CSS来创建一个网页，其中包含了一系列的爱心图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Photo Wall</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
}
.photo-wall {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.photo-wall img {
margin: 10px;
width: 150px;
height: 150px;
object-fit: contain;
}
</style>
</head>
<body>
<div class="photo-wall">
<img src="heart1.jpg" alt="Heart Photo 1">
<img src="heart2.jpg" alt="Heart Photo 2">
<img src="heart3.jpg" alt="Heart Photo 3">
<!-- Add more images as needed -->
</div>
</body>
</html>在这个示例中，.photo-wall 类使用了flexbox布局来排列照片，img 元素设置了统一的样式。你需要将 heart1.jpg, heart2.jpg, heart3.jpg 替换成实际的图片文件名。如果有更多的图片，你可以继续添加 <img src="..." alt="Heart Photo X"> 到 .photo-wall 容器中。这个示例提供了一个简单的起点，你可以根据需要添加更多的样式和功能。
评论已关闭