如何在链接右边添加一个示意图标来达到对用户更友好的交互

最新推荐文章于 2020-12-26 00:08:27 发布

杨不败

最新推荐文章于 2020-12-26 00:08:27 发布

阅读量561

点赞数

分类专栏： JavaScript-CSS-HTML 文章标签： css html

本文链接：https://blog.csdn.net/AndyNikolas/article/details/79471657

版权

JavaScript-CSS-HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
  a[href $='.pdf'] {
    padding-right: 20px;
    background: transparent url(http://www.iconpng.com/png/lozengue-filetype/pdf.png) no-repeat right;
    background-size: contain;
  }
</style>
<body>
<a href="godkun.pdf">pdf文件</a>
</body>
</html>

示意图如下:

对background进行分析:

transparent 是指背景颜色设置为透明色
背景url图片是默认填的区域大小为width的值，如果是边框盒模型，就是包括padding和border
no-repeat是不重复图片来填充区域，只填充一个
right是指填充在背景区域的最右侧

对a[href $='.pdf']进行分析：

href 指定a标签的链接类型
$ 表示结束的位置，用于正则
$='.pdf'是指匹配以.pdf结尾的href链接

杨不败

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在链接右边添加一个示意图标来达到对用户更友好的交互

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;style&gt; a[href $='.pdf'] { padding-right: 20px; background: transparent url(http://www.ico
复制链接

扫一扫

专栏目录