Маркированный список - Самоучитель HTML - WEB - Статьи

Главная » Статьи » WEB » Самоучитель HTML

Маркированный список

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>, как показано ниже.

<ul>
 <li>Первый пункт</li>
 <li>Второй пункт</li>
 <li>Третий пункт</li>
</ul>

В списке непременно должен присутствовать закрывающий тег </ul>, иначе возникнет ошибка. Закрывающий тег </li> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.

В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

Пример 11.1. Создание маркированного списка

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!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=utf-8">
 <title>Маркированный список</title>
 </head>
 <body>
 <hr>
 <ul>
 <li>Чебурашка</li>
 <li>Крокодил Гена</li>
 <li>Шапокляк</li>
 <li>Крыса Лариса</li>
 </ul>
 <hr>
 </body>
</html>

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

Рис. 11.1

Рис. 11.1. Вид маркированного списка

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

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега <ul>. Допустимые значения приведены в табл. 11.1

Табл. 11.1. Стили маркеров списка
Тип списка	Код HTML	Пример
Список с маркерами в виде круга	<ul type="disc"> <li>...</li> </ul>	Первый Второй Третий
Список с маркерами в виде окружности	<ul type="circle"> <li>...</li> </ul>	Первый Второй Третий
Список с квадратными маркерами	<ul type="square"> <li>...</li> </ul>	Первый Второй Третий

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

Создание списка с квадратными маркерами показано в примере 11.2.

Пример 11.2. Вид маркеров

HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4

<!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=utf-8">
 <title>Маркированный список</title>
 </head>
 <body>
 <p><strong>Изменение убеждений</strong></p>
 <ul type="square">
 <li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). 
 Специальное предложение - иудаизм и мусульманство вместе;</li>
 <li>изменение веры в непогрешимость любимой партии;</li>
 <li>убеждение в том, что инопланетяне существуют;</li>
 <li>предпочтение политического строя, как самого лучшего в своем роде 
 (на выбор: феодализм, социализм, коммунизм, капитализм).</li>
 </ul>
 </body>
</html>

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

Рис. 11.2

Рис. 11.2. Вид списка с квадратными маркерами

Категория: Самоучитель HTML | Добавил: expert1 (31.01.2013)

Просмотров: 479 | Теги: html, Самоучитель | Рейтинг: 0.0/0

Всего комментариев: 0

Главное меню

Вход

Статистика

Стихи

Рекомендуем

Загрузки

Проекты