`元素，并创建了一个空的相册。我们还留下了一个注释，用于添加照片。

步骤三：添加照片

现在，我们可以开始添加照片到我们的相册中了。我们可以使用以下代码来添加一张照片：

“`javascript

var photo = document.createElement(“img”);

photo.src = “photo.jpg”;

album.appendChild(photo);

“`

在这个代码中，我们创建了一个``元素，并设置了它的`src`属性为我们要展示的照片的URL。然后，我们把这个元素添加到了相册中。

我们可以使用这个代码来添加更多的照片，只需要修改`src`属性即可。

步骤四：样式设计

现在，我们的相册已经可以展示照片了，但是它看起来还不太好看。我们可以使用CSS来为相册添加样式。

我们可以使用以下代码来为相册添加样式：

“`css

album {

display: flex;

flex-wrap: wrap;

}

album img {

width: 200px;

height: 200px;

object-fit: cover;

margin: 10px;

border-radius: 10px;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

}

“`

在这个代码中，我们为相册添加了一个`flex`布局，并设置了照片的宽度、高度、边距、圆角和阴影等样式。

步骤五：完善功能

现在，我们的相册已经可以展示照片并且看起来很漂亮了。但是，我们还可以为它添加更多的功能。

例如，我们可以使用以下代码来为相册添加一个点击事件，使得当用户点击照片时可以放大它：

“`javascript

album.addEventListener(“click”, function(event) {

if (event.target.tagName == “IMG”) {

event.target.classList.toggle(“zoom”);

}

});

“`

在这个代码中，我们为相册添加了一个点击事件，并检查了用户点击的元素是否是一个``元素。如果是，我们就为它添加了一个`zoom`类，用于放大它。

我们还可以为相册添加其他功能，例如滑动、搜索等等。

结论

通过使用JavaScript，我们可以轻松地创建一个属于自己的相册页面，并为它添加各种功能和样式。希望本文能够帮助你创建出一个漂亮的相册页面。