Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 15


Самоучитель по HTML и CSS

Добрый день.

Напоминаю, что на сайте htmlbook.ru обновился раздел с тегами HTML по адресу http://htmlbook.ru/html. Теперь вы можете уточнить информацию по любому интересующемуся тегу.

11. Списки (продолжение)

Список определений

Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <DL>, термин — тегом <DT>, а его определение — с помощью тега <DD>. Вложение тегов для создания списка определений продемонстрировано в листинге 11.5.

Листинг 11.5. Общая структура списка определений

<dl>
 <dt>Термин 1</dt>
 <dd>Определение 1</dd>
 <dt>Термин 2</dt>
 <dd>Определение 2</dd>
<dl>

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

Листинг 11.6. Создание списка определений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список определений</title>
</head>
<body>

<dl>
<dt>Тег</dt>
<dd>Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др., и для изменения их вида.</dd>

<dt>HTML-документ</dt>
<dd>Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.</dd>

<dt>Сайт</dt>
<dd>Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.</dd>
</dl>

</body>
</html>

Результат примера показан на рис. 11.5.

Рис. 11.5

Рис. 11.5. Вид списка определений

Как видно на картинке, текст термина прижимается к левому краю окна браузера, а его определение сдвигается вправо.

Вопросы для проверки

1. Какой элемент списка написан с ошибкой?

  1. <li type="a">Первый</li>
  2. <li type="circle">Второй</li>
  3. <li type="dick">Третий</li>
  4. <li type="i">Четвертый</li>
  5. <li type="square">Пятый</li>

2. Какой тип списка устанавливает параметр type="a" тега <OL>?

  1. нумерованный, с римскими числами
  2. нумерованный, с арабскими числами
  3. маркированный, с маркерами в виде круга
  4. нумерованный, с латинскими буквами
  5. нумерованный, с русскими буквами

3. Какой параметр тега <OL> начинает нумерацию списка с определенного значения?

  1. begin
  2. start
  3. number
  4. type
  5. value

4. С какого тега начинается список определений?

  1. DD
  2. DT
  3. DL
  4. DV
  5. DM

5. Какой тег не относится к тегам списка?

  1. OL
  2. LI
  3. UL
  4. DL
  5. DFN

Задание

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

Рис. 11.6

Рис. 11.6

2. Создайте список, как показано на рис. 11.7. Ссылки не обязательно должны работать (т.е. вести на какие-то существующие файлы), главное соблюсти указанный вид и валидность кода.

Рис. 11.7

Рис. 11.7

Рецепты CSS

Как разместить элементы списка горизонтально?

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевой атрибут display со значением inline, он преобразует блочный элемент во встроенный.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Горизонтальный список</title>
<style type="text/css">
ul.hr {
 margin: 0px; /* Обнуляем значение отступов */
 padding: 0px; /* Обнуляем значение полей */
}
ul.hr li {
 display: inline; /* Отображать как встроенный элемент */
 margin-right: 5px; /* Отступ слева */
 border: 1px solid #000; /* Рамка вокруг текста */
 padding: 3px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul class="hr">
 <li>Мчади</li>
 <li>Када на мацони</li>
 <li>Пахлава</li>
 <li>Кчуч</li>
 <li>Лилибдж</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1.

Горизонтальный список

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя параметры margin и padding к селектору UL, как показано в примере.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное