Все для начинающих
Примеры списков на HTML и CSS
Пример списка «Поры года»
Подробнее о создании и оформлении списков можно почитать в наших учебниках по HTML и CSS, соответственно, здесь и здесь.
В качестве простого примера создания вложенных списков используем поры года и соответствующие им месяцы года. При этом для маркеров списков используем изображения.
-
Зима
- Декабрь
- Январь
- Февраль
-
Весна
- Март
- Апрель
- Май
-
Лето
- Июнь
- Июль
- Август
-
Осень
- Сентябрь
- Октябрь
- Ноябрь
Пример списка «Оглавление учебника»
А вот и знакомое нам оглавление, которое присутствует на стартовых страницах учебников, задачников, видеоуроков. Здесь в пунктах вложенных списков расположены ссылки.
- §1. Введение в HTML
- §2. Форматирование текста
- §3. Служебные теги
Примеры различного оформления одного и того же списка
Здесь мы приведем варианты различного оформления одного и того же списка. Это значит, что html-код списка мы изменять не будем, а вот стили CSS к нему будем применять разные. Поскольку списки очень часто используются для создания меню сайта и его разделов, то на выходе мы получим также и различные варианты их оформления (в качестве элементов списка в этом случае можно использовать ссылки либо совершать переходы при помощи JavaScript).
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Обычный нумерованный список без оформления. Пункты списка располагаются вне списка (задайте в коде границы и посмотрите).
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Пример №1. В данном примере мы просто установили пунктам списка границы, тени и светлый линейный градиент. Для шрифта была использована капитель.
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Пример №2. Данный список мы немного изменили, но внешние изменения говорят сами за себя. Достаточно было сильнее скруглить углы, изменить шрифт и выполнить выравнивание текста по центру. Попробуйте самостоятельно добавить пунктам списка легкий почти белый градиент или свой фон.
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Пример №3. Чтобы получить «Зебру», мы при помощи псевдокласса :nth-child() установили для четных и нечетных пунктов списка разные фоны. Также для всего списка мы установили левую утолщенную границу.
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Пример №4. Здесь мы использовали для пунктов списка границы и тень. При чем левую границу сделали толще и раскрасили разными цветами (цвета можно брать из таблиц здесь). Для раскраски границ отдельных пунктов меню мы использовали псевдокласс типа :nth-child(). Также обратите внимание на скругленные углы и то, что при наведении курсора мыши цвет левой границы изменяется на черный.
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Пример №5. Для самого списка мы использовали фон без границ, но с закругленными углами. Для пунктов списка мы установили только нижнюю пунктирную границу, но зато изменили стиль текста. В качестве маркеров списка мы использовали генерируемое содержимое, которое при помощи абсолютного позиционирования вынесли за пределы пунктов списка. Кружки мы получили при помощи приема полного скругления углов элемента.
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
- Элемент списка
Пример №6. Как и в списке выше в качестве маркеров списка мы использовали генерируемое содержимое в виде номеров. Однако мы вообще убрали границы, а также несколько изменили цветовую гамму списка и оформление генерируемого содержимого.