在链接之前或之后放置图标以指示文件类型的最佳做法是什么(例如:链接 Adob​​e PDF、音频或视频)

2024-03-07

我的团队正在讨论在我们网站上的各种媒体文件类型的链接后插入图标的最佳实践是什么。例如,链接到 PDF 并希望插入图标图像以让用户知道它是 PDF。同样的方法也可用于视频或音频文件。

我建议使用 CSS,在 上放置一个类并使用 :after 创建一个元素。

我记得IE6和IE7不支持伪CSS类,但除此之外,还有更好的做法吗?

如果链接位于无序列表中,我知道图标图像可用于替换项目符号字符,但我不确定段落或其他 HTML 元素。


您可以在伪类之前或之后使用,我认为这是一种方法,

但是,您可以通过在链接中添加一些额外的填充并输入背景图像来完成此操作,并且您不需要添加类,因为您可以使用子字符串属性选择器 http://www.w3.org/TR/css3-selectors/#attribute-selectors通过其扩展名选择(目标)链接。

e.g.

a[href$='.pdf'] {
  background: transparent url(pdf-icon.gif) center right no-repeat;
  padding-right: 20px;
}

使用属性选择器也适用于您:before or :after也生成了元素,您可以将这些元素制作成一个足够大的内联块,以包含图像作为背景。

e.g.

a[href$='.pdf']:after {
   content: url(pdf-icon.gif);
   margin-left: 4px;
   display: inline-block;
   width: 12px;
   height: 12px;
}

查看此页面 http://www.kkcfilms.com/?p=1319以获得更多解释

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在链接之前或之后放置图标以指示文件类型的最佳做法是什么(例如:链接 Adob​​e PDF、音频或视频) 的相关文章