Примеры списков на HTML и CSS

Пример списка «Поры года»

Подробнее о создании и оформлении списков можно почитать в наших учебниках по HTML и CSS, соответственно, здесь и здесь.

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

  • Зима
    • Декабрь
    • Январь
    • Февраль
  • Весна
    • Март
    • Апрель
    • Май
  • Лето
    • Июнь
    • Июль
    • Август
  • Осень
    • Сентябрь
    • Октябрь
    • Ноябрь

Пример списка «Оглавление учебника»

А вот и знакомое нам оглавление, которое присутствует на стартовых страницах учебников, задачников, видеоуроков. Здесь в пунктах вложенных списков расположены ссылки.


Примеры различного оформления одного и того же списка

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

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Обычный нумерованный список без оформления. Пункты списка располагаются вне списка (задайте в коде границы и посмотрите).

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Пример №1. В данном примере мы просто установили пунктам списка границы, тени и светлый линейный градиент. Для шрифта была использована капитель.

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Пример №2. Данный список мы немного изменили, но внешние изменения говорят сами за себя. Достаточно было сильнее скруглить углы, изменить шрифт и выполнить выравнивание текста по центру. Попробуйте самостоятельно добавить пунктам списка легкий почти белый градиент или свой фон.

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Пример №3. Чтобы получить «Зебру», мы при помощи псевдокласса :nth-child() установили для четных и нечетных пунктов списка разные фоны. Также для всего списка мы установили левую утолщенную границу.

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Пример №4. Здесь мы использовали для пунктов списка границы и тень. При чем левую границу сделали толще и раскрасили разными цветами (цвета можно брать из таблиц здесь). Для раскраски границ отдельных пунктов меню мы использовали псевдокласс типа :nth-child(). Также обратите внимание на скругленные углы и то, что при наведении курсора мыши цвет левой границы изменяется на черный.

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Пример №5. Для самого списка мы использовали фон без границ, но с закругленными углами. Для пунктов списка мы установили только нижнюю пунктирную границу, но зато изменили стиль текста. В качестве маркеров списка мы использовали генерируемое содержимое, которое при помощи абсолютного позиционирования вынесли за пределы пунктов списка. Кружки мы получили при помощи приема полного скругления углов элемента.

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Пример №6. Как и в списке выше в качестве маркеров списка мы использовали генерируемое содержимое в виде номеров. Однако мы вообще убрали границы, а также несколько изменили цветовую гамму списка и оформление генерируемого содержимого.

▲
▼