Как сделать у ссылок иконки, соответствующие типу файлов
Как сделать у ссылок иконки, соответствующие типу файлов
Понадобилось сделать красивую страничку со списком файлов. Помимо прочего оформления, решил к ссылкам на файлы добавить иконки, соответствующие их типам, примерно как это делается в Проводнике Windows или файловых менеджерах. Сперва хотел реализовать это на серверной стороне, потом подумал, еще подумал, и решил обойтись чистым CSS. Делается это все очень просто. Для каждой ссылки списка в стилях добавляется селектор, соответствующий расширению файлов:
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- a[href$=".pdf"] {
- padding-left: 20px;
- background: url('/img/file_pdf.png') no-repeat left 3px;
- }
- a[href$=".doc"], a[href$=".docx"] {
- padding-left: 20px;
- background: url('/img/file_word.png') no-repeat left 3px;
- }
- a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"] {
- padding-left: 20px;
- background: url('/img/file_img.png') no-repeat left 3px;
- }
- </style>
Просмотров: 1126 | Комментариев: 0
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,133 раза
Поблагодарили 35,133 раза
 |
2024 - СЕНТЯБРЬ |  |
||||
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | ||||||
День финансиста
День Новороссийской военно-морской базы ВМФ России
День Бородинского сражения
День танкиста
Всемирный день журавля
День памяти жертв фашизма
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |