FAQ по HTML – Работаем со списком

  Опубликовано: 2010-05-12    Просмотров: 2204  Алексей Фомичев пишет:

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

Списки вносят свой вклад для облегчения нам этой процедуры.

Списки бывают:

• Маркированные;
• Нумерованные списки;
• Список определений;
• Вложенные списки.

Начнем с рассмотрения маркированного списка. Для того чтобы его создать существуют теги ul и li.

Конструкция построения списка такова:

Как видите, все теги требуют обязательного закрытия. По умолчанию в качестве маркера используется круг. Так же маркер может принимать значение окружность и квадрат (circle и square).

Для этого необходимо в теге ul прописать параметр type.

Так же с помощью css можно изменить маркер, вставив за место него свой рисунок. Для этого необходимо прописать атрибут list-style-image.

Пример оформление стиля:

Этот код необходимо разместить в метатеге head.

Переходим плавно к нумерованным спискам, которые необходимы для обозначение строк по порядковым номерам. Для создания нумерованного списка применяют тег ol.

Так же как и в маркированных списках, маркер нумерованных может принимать следующие значения:

• арабские цифры; (параметр type="1")
• заглавные латинские буквы; (параметр type="A")
• строчные латинские буквы; (параметр type="a")
• заглавные римские цифры; (параметр type="I")
• строчные римские цифры; (параметр type="i")

Если вам необходимо начать список с определенной цифры, то необходимо записать так:

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

Структура списка определений следующая.

Термин 1
Определение термина 1
Термин 2
Определение термина 2

Такой список задается с помощью контейнера dl, термин — тегом dt, а его определение — с помощью тега dd.

Вложенные списки представляют сложную иерархической структуры текста. Что бы вы поняли, о чем я говорю, посмотрите на пример такой структуры.

1. Тема 1
1. Пункт 1.1
2. Пункт 1.2

2. Тема
1. Пункт 2.1
2. Пункт 2.1

Создать такую структуру можно так:

Вот и все что вам необходимо знать про списки.

Содержание FAQ по HTML:

Введение.

Форматирование текста.

Учимся делать ссылки.

Работаем со списком.

Изучаем таблицы.

Форма, как средство взаимодействия с пользователем сайта.

Комментарии к записи:

Добавил(а): Руслан     Дата добавления: 2010-08-20

Текст хороший, но также можно использовать JQuery для создания красивых списков

Добавил(а): Денис Шипов     Дата добавления: 2011-05-30

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