多用途网站模板. 如何管理图像链接
2017年5月18日
Hello! 本视频教程展示了如何 管理图片链接 在多用途 HTML模板.
它可能会发生,你想添加新的链接到文本/图像在您的 website 并删除现有链接.
让我们学习一下怎么做.
-
打开相应的 .html 使用任何文本编辑的页面的文件 editor (notepad++, Sublime Text 2等.):
比方说,你想从一些项目标题中删除链接,并添加链接到图像本身:
-
Use the CTR + F / CMND + F key (Windows OS/Mac OS)在文件中查找所需的部分:
如你所见, H5 标题链接在代码中:
-
AVA Nob Hill
现在让我们将项目图像链接到相同的URL:
-
寻找 属性并为其添加链接,因此它看起来如下所示:
-
保存文件并将其上传到服务器,替换原始文件,以查看更改.
-
刷新页面 website,您可以看到第一个项目的图像,而不是项目的标题现在链接.
现在,假设您想要在a中打开项目图像 lightbox,因此显示较大的图像.
让我们以第二个项目图像为例.
-
将以下代码添加到第二项的image属性中:
Where thumbnail-classic 是一个链接类, data-size 是一个属性,它定义在?中打开的较大图像的大小 lightbox, and 图片/ home - img - 06 - 370×250.jpg 打开图像的路径是 lightbox.
您可以使用自定义CSS类来拥有 lightbox 风格符合你的愿望.
代码应该如下所示:
-
不要忘记将编辑后的文件上传到服务器,以便对 website.
您可以看到第二个项目的图像打开在 lightbox now.
本教程到此结束. 现在你知道怎么做了 管理图片链接 在多用途 HTML templates.
请随时查看下面的详细视频教程:
多用途网站模板. 如何管理图像链接