Оценить:
 Рейтинг: 4.6

HTML, XHTML и CSS на 100%

Жанр
Год написания книги
2010
Теги
<< 1 ... 9 10 11 12 13 14 15 16 17 ... 30 >>
На страницу:
13 из 30
Настройки чтения
Размер шрифта
Высота строк
Поля

<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>
<< 1 ... 9 10 11 12 13 14 15 16 17 ... 30 >>
На страницу:
13 из 30