Хаки и Скрипты Next Generation CMS

Выводим иконки типов файлов возле каждой ссылки на чистом CSS

irbees2008 irbees2008 Опубликовано - 30 - апреля CSS
3059 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Пришел заказ , нужно сделать страничку, на которой будут выкладываться файлы разных типов архивы, картинки, документы, и при этом чтобы каждый тип файла выделялся.Это все очень просто сделаем при помощи CSS

Итак приступим:
1. Поскольку каждый файл у нас — это ссылка.

Код:
<a href='downloads/Мой файл.zip'>Мой файл.zip</a>
добавим общий стиль ссылок в CSS:
Код:
a{ padding-left: 18px;
background-position: 0 0;
background: transparent url(../images/icon.png) no-repeat;
}
Как видите мы задали смещение для текста ссылки на 18 px влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, т.е. если пользователь добавит файл, не описанный в стилях.
2.ну теперь приступим к описанию типов файлов:
Код:
a[href $='.pdf'] {
padding-left: 18px;
background-position: 0 0;
background: transparent url(../images/pdf.png) no-repeat;
}
a[href $='.zip'] {
padding-left: 18px;
background-position: 0 0;
background: transparent url(../images/zip.png) no-repeat;
}
Как вы заметили ,мы прописываем для каждого типа файла свою иконку и свой стиль ,также мы можем даже подсвечивать каждый тип файла своим цветом,но это уже как хотите.
Практически также как и эти иконки у ссылок выводятся и фавиконки в выдаче поисковика.
НЕЗАБЫВАЕМ СКАЧАТЬ ИКОНКИ[COUNTER] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. [/COUNTER]

Можешь почитать и вот эту статейку "Поделиться увлекательной новостью "

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [11]
  • Гости: [9]
  • Поисковики: [2] Яндекс, Google
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 32
  • Генерация страницы: 0.157сек
  • Потребление памяти: 4.936 Mb 
  •   яндекс.ћетрика