多用途网站模板. 如何管理图像链接

Hello! 本视频教程展示了如何 管理图片链接 在多用途 HTML模板.

它可能会发生，你想添加新的链接到文本/图像在您的 website 并删除现有链接.

让我们学习一下怎么做.

1. 打开相应的 .html 使用任何文本编辑的页面的文件 editor (notepad++， Sublime Text 2等.):

   

   比方说，你想从一些项目标题中删除链接，并添加链接到图像本身:

   

2. Use the CTR + F / CMND + F key (Windows OS/Mac OS)在文件中查找所需的部分:

   

   如你所见， H5 标题链接在代码中:

   

3. Remove the 属性从标题代码，所以它看起来如下:

   AVA Nob Hill

   

   现在让我们将项目图像链接到相同的URL:

   

4. 寻找 属性并为其添加链接，因此它看起来如下所示:

5. 保存文件并将其上传到服务器，替换原始文件，以查看更改.

6. 刷新页面 website，您可以看到第一个项目的图像，而不是项目的标题现在链接.

现在，假设您想要在a中打开项目图像 lightbox，因此显示较大的图像.

让我们以第二个项目图像为例.

1. 将以下代码添加到第二项的image属性中:

   Where thumbnail-classic 是一个链接类， data-size 是一个属性，它定义在?中打开的较大图像的大小 lightbox, and 图片/ home - img - 06 - 370×250.jpg 打开图像的路径是 lightbox.

   您可以使用自定义CSS类来拥有 lightbox 风格符合你的愿望.

   代码应该如下所示:

   

2. 不要忘记将编辑后的文件上传到服务器，以便对 website.

您可以看到第二个项目的图像打开在 lightbox now.

本教程到此结束. 现在你知道怎么做了 管理图片链接 在多用途 HTML templates.

请随时查看下面的详细视频教程: