gpt4 book ai didi

html - 添加图标以在链接中显示多种文件类型

转载 作者:行者123 更新时间:2023-11-28 03:24:23 24 4
gpt4 key购买 nike

我实现了一种在这样的页面上呈现链接的方法 link

这是一个页面 here显示与文件类型一起显示的图标。我的问题是有些文件名称相同,但文件扩展名不同。一个是 CSV 文件,另一个是 excel 文件。请参见下面的示例:

2015 年至 2017 年食品价格指数变化(xls 文件)
2015 年至 2017 年食品价格指数的变化(csv 文件)

我想只显示一个标题和文件扩展名的图标链接。

2015 年至 2017 年食品价格指数的变化(xls 文件图标,csv 图标)

这是我的 CSS

span.file a{
display:block;
padding: 1px 0px;
}

span.file a[href*='.pdf'] &[href*='.PDF'] {
background-image: url(/css/images/pdf.gif);
background-repeat: no-repeat;
background-position: right center;
padding-right: 23px;
}
span.file a[href*='.zip'] &[href*='.ZIP'] {
background-image: url(/css/images/zip.gif);
background-repeat: no-repeat;
background-position: right center;
padding-right: 23px;
}
span.file a[href*='.doc'] &[href*='.DOC'] {
background-image: url(/css/images/word.gif);
background-repeat: no-repeat;
background-position: right center;
padding-right: 23px;
}
span.file a[href*='.xls'] &[href*='.XLS'] {
background-image: url(/css/images/xls.gif);
background-repeat: no-repeat;
background-position: right center;
padding-right: 23px;
}

span.file a[href*='.csv'] &[href*='.CSV'] {
background-image: url(/css/images/CSV.png);
background-repeat: no-repeat;
background-position: right center;
padding-right: 23px;
}

最佳答案

如果您的网址如下所示:


<a href="/file.xlsx?v=123">Link Title</a>
<a href="/file.xlsx?v=123" class="xlsx">Download XLS</a>
<a href="/file.csv?v=123" class="csv">Download CSV</a>

然后你可以像这样使用 CSS 来概括图标:

.csv, .xlsx {
display : inline-block;
height : 16px;
width : 16px;
overflow : hidden;
text-indent : -32px;
position : relative;
background : none scroll no-repeat left top transparent;
}

然后为每个自定义背景:

.csv {
background-image: url(/icons/csv.png);
}
.xlsx {
background-image: url(/icons/xlsx.png);
}

关于html - 添加图标以在链接中显示多种文件类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45064313/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com