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

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

Маркированные списки – это списки, в которых пункты отмечаются с помощью различных символов. Такие списки еще называют ненумерованными, или неупорядоченными, потому что для элементов данного списка последовательность неважна. Эти списки можно использовать для простого перечисления объектов или их свойств.

Для создания списков в HTML предусмотрен элемент UL, требующий наличия закрывающего тега. Пункты списка находятся внутри элемента UL. Каждый пункт начинается с элемента LI.

У элемента UL есть атрибут type, определяющий вид маркера списка. Он может принимать следующие значения:

• circle – создает маркер в виде круга, белого внутри;

• square – создает маркер в виде квадрата;

• disc – создает маркер в виде круга, закрашенного черным цветом.

Маркер можно выбирать любой, на ваш взгляд наиболее соответствующий виду страницы.

В листинге 2.5 представлен пример создания маркированных списков с разными маркерами.

Листинг 2.5. Маркированные списки

<html

<head>

<title>Списки</title>

<body>

<ul type="circle">

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

<ul compact type="square" >

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

<ul compact type="disc" >

<li>Венера</li>

<li>Земля</li>

<li>Юпитер</li>

<li>Марс</li>

</ul>

</body>

</html>

Результат обработки кода из листинга 2.5 показан на рис. 2.5. Здесь видно, как выглядят разные маркеры списков.

Рис. 2.5. Маркированные списки

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

В листинге 2.6 приведен пример создания списка с разными маркерами для различных пунктов.

Листинг 2.6. Список с разными маркерами

<html>

<head>

<title>Списки</title>

<body>

<ul>

<li type="circle">Земля</li>

<li type="circle">Марс</li>

<li type="square">Солнце</li>

<li type="circle">Венера</li>

<li type="disc">Луна</li>

</ul>

</body>

</html>

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

Рис. 2.6. Список с разными маркерами

В примере различные маркеры отмечают объекты разных типов.

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

В HTML есть возможность создать список с графическими маркерами. Для этого нужно вместо элемента LI подставить картинку с желаемым изображением. Элемент UL укажет браузеру, что надо сделать отступ, а с помощью элемента BR можно перенести строку.

В листинге 2.7 представлен пример создания списка с графическими маркерами.

Листинг 2.7. Список с графическими маркерами

<html>

<head>

<title>Списки</title>

<body>

<ul>

<img src="marker.jpg" />Венера<br />

<img src="marker.jpg" />Марс<br />

<img src="marker.jpg" />Земля<br />

</ul>

</body>

</html>

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

Рис. 2.7. Список с графическими маркерами

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

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК

Данный текст является ознакомительным фрагментом.