Blog. Just Blog

Как сделать у ссылок иконки, соответствующие типу файлов

16.01.2021 | Категория: Web-мастеру и не только | Автор: ManHunter

Как сделать у ссылок иконки, соответствующие типу файлов

Понадобилось сделать красивую страничку со списком файлов. Помимо прочего оформления, решил к ссылкам на файлы добавить иконки, соответствующие их типам, примерно как это делается в Проводнике Windows или файловых менеджерах. Сперва хотел реализовать это на серверной стороне, потом подумал, еще подумал, и решил обойтись чистым CSS. Делается это все очень просто. Для каждой ссылки списка в стилях добавляется селектор, соответствующий расширению файлов:
  1. <style type="text/css">
  2. a[href$=".pdf"] {
  3.     padding-left20px;
  4.     backgroundurl('/img/file_pdf.png'no-repeat left 3px;
  5. }
  6.  
  7. a[href$=".doc"], a[href$=".docx"] {
  8.     padding-left20px;
  9.     backgroundurl('/img/file_word.png'no-repeat left 3px;
  10. }
  11.  
  12. a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"] {
  13.     padding-left20px;
  14.     backgroundurl('/img/file_img.png'no-repeat left 3px;
  15. }
  16. </style>
Размеры изображений с типами файлов подбирайте под размеры текста, смещение фона относительно текста ссылки и отступ также определяются экспериментальным путем в зависимости от особенностей верстки.

Просмотров: 183 | Комментариев: 0

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0133 сек.) / Память: 4.75 Mb
Наверх