仅使用css制作css和html的最佳方法是什么

我正在尝试使用四个图像创建lightbox。出于某种原因，每个链接都会打开第一个lightbox图像

---

您的所有链接的

href

属性等于

\img1

您应该为您的

a

标签提供相应灯箱图像链接的

id

的

href

属性：

缩略图图像链接1：

<a href="#img1"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img1"><img src="image/url"></a>

对应于灯塔图像链接1：

<a href="#img1"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img1"><img src="image/url"></a>

缩略图图像链接2：

<a href="#img2"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img2"><img src="image/url"></a>

对应于灯塔图像链接2：

<a href="#img2"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img2"><img src="image/url"></a>

缩略图图像链接3：

<a href="#img3"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img3"><img src="image/url"></a>

对应于灯塔图像链接3：

<a href="#img3"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img3"><img src="image/url"></a>

缩略图图像链接4：

<a href="#img4"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img4"><img src="image/url"></a>

对应于灯塔图像链接4：

<a href="#img4"><img src="image/url"></a>

<a href="#_" class="lightbox" id="img4"><img src="image/url"></a>

这四幅图像的所有超链接都指向#img1:）…我如何修复它？你可以在index.html的第17-20-23行上提供帮助吗？你必须将#img1更改为：#img2在第17行上，#img3在第20行上，以及#img4在第23行上……你知道如何创建右上角的“关闭X”按钮以在打开图像时关闭吗？我现在有一个不同的问题，如何使“X”按钮在图像打开时关闭图像。请参阅：