» »

Красиво оформленные списки CSS на 3 варианта

Красиво оформленные списки CSS на 3 варианта

Подборка списков в трех вариаций, что созданы с фоновой графикой при помощи CSS. Где может содержать несколько запросов на сайте под клик. Есть список с аналогичной кнопкой, которая идет под светло желтым оттенком, что будет размещен в материале. Остальные вы можете скачать, где представлены под установку коды и стили, что можете самостоятельно заменить свои знаки под свою тематическую платформу. В этой статье, постараемся подробно рассказать, о том, как создать красивый стиль под оригинальные списки, что идут на CSS с другим типом такого списка со списком фоновых изображений, также стилем списка с фоном номера круга и стилем списка со стрелкой.

Вообщем тот вариант, который вам больше подходит на сайт по его основному дизайн. А где можно применить, то здесь можно задействовать под информер или поставить под основные запросы, чтоб гости и пользователи сайта, зайдя на сайт изначально видели их, но и под навигацию, которая будет смотреться оригинально на любом интернет ресурсе.

Также не забываем, что использование упорядоченных списков стилей всегда было не очень сложным пунктом, но вот для очень важных или актуальных статей, где изначально разъясняет тему читателю. В саму нумерацию стилей вам нужно удалить стили браузера, которые по умолчанию, где добавляем элементы списка для полноценной настройки. На всех браузерах они смотрятся отлично и главное корректно выводят, где можно самостоятельно задать скрипт или поработать со стилистикой, чтоб сделать более оригинальной и заметной функций на сайте.

Приступаем к установке:

1. Создание стиля списка со стрелкой:

Создание стиля списка со стрелкой

Здесь будет использоваться неупорядоченный стиль списка со стрелкой как изображение, что простой в использовании.

HTML

Код
<div class="dkolersanumsa"><font></font>
  <ul><font></font>
  <li><a href="zornet.ru">Слайд кнопки социальных сетей CSS для сайта</a></li><font></font>
  <li><a href="zornet.ru/load/kruglye_zeljonye_ikonki_dlja_sajta_ucoz/37-1-0-223">Круглые зелёные иконки для сайта ucoz</a></li><font></font>
  <li><a href="http://zornet.ru">Скрипт Каталога файлов ucoz в оригинале</a></li><font></font>
  <li><a href="Ссылка">45 Best Responsive WordPress Themes March 2013</a></li><font></font>
  <li><a href="http://zornet.ru/">Серые переключатели страниц каталога файлов Ucoz</a></li><font></font>
  <li><a href="http://zornet.ru">Кнопка скачать для каталога файлов системы ucoz</a></li><font></font>
  </ul><font></font>
</div>

CSS

Код
.dkolersanumsa ul{
  margin:0px;
}
.dkolersanumsa li {
  font-size: 15px;
  margin-left: 23px;
  padding: 0px;
  list-style: url(http://zornet.ru/ABVUN/arrow.png);
  line-height: 29px;
}
.dkolersanumsa li a:link, .dkolersanumsa li a:visited{
  color:#1e598e;
  text-decoration:none;

}
.dkolersanumsa li a:hover {
  color: #0d658c;
  padding: 3px;
  -moz-box-shadow: 0px 0px 12px #9e9ea3;
  -webkit-box-shadow: 0px 0px 12px #d5d5dc;
  box-shadow: 0px 0px 5px #e5e5ef;
  border: none 0px #252424;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

Демонстрация

2. Создание стиля списка с использованием фона окружности

Создание стиля списка с использованием фона окружности

Аналогично упорядоченный тип, чтобы он мог показывать порядковый номер по уровню.

Он находится в архиве, что нужно скачать.

3. Создание списка CSS с помощью спрайтов

Создание списка CSS с помощью спрайтов

Отличный метод, что изначально комбинирует картинки под запросы в один файл, так как можете выставлять неограниченное количество изображений при использование CSS стиля.

Аналогично в архиве все для установке найдете, что для этого нужно скачать.

Здесь изначально представлен один список для Demo версий, чтоб понять из работу и как визуально выглядит.
09.05.2018 Загрузок: 3 Просмотров: 231 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
-SAM-
-SAM- 10.05.2018 02:421
0
В 1 пункте вариант с картинкой имеет недостаток (смотрим заглавный постер материала и первый скрин\демо), а именно проблема с вертикальным выравниванием изображения стрелки (собственно, в этом способе с подобным часто сталкиваться придётся - картинку списка нужно под высоту строки рисовать и под отступы в ней). Можно иначе стилизовать, по примеру из пункта 3, то вот так в итоге получится.

В материале и архиве скрины для 2 и 3 пункта попутаны, исправьте (ибо сейчас 3 скрин - как раз нумерованный идёт, а 2 - спрайт).
Kosten
Kosten 10.05.2018 02:522
0
Здесь полностью согласен, так как изначально шло не слишком корректно на этом списке, на пару пикселей проседал запрос.
avatar