HTML, XHTML и CSS на 100%. Игорь Квинт
Читать онлайн.| Название | HTML, XHTML и CSS на 100% |
|---|---|
| Автор произведения | Игорь Квинт |
| Жанр | Интернет |
| Серия | |
| Издательство | Интернет |
| Год выпуска | 2010 |
| isbn | 978-5-498-07594-5 |
<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 приведен пример создания списка с разными маркерами для различных пунктов.
<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 представлен пример создания списка с графическими маркерами.
<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. Список с графическими маркерами
Теперь можно использовать картинки для создания симпатичных списков, соответствующих стилю вашего сайта.
Нумерованный список
Однако использование неупорядоченных списков не всегда допустимо. Что делать, если нужно расписать порядок действий, например рецепт приготовления блюда? Для перечисления ингредиентов можно использовать неупорядоченный список, а для описания порядка действий понадобится пронумерованный список.
Нумерованные списки применяются, когда порядок следования пунктов списка имеет большое значение, например при описании алгоритмов или других пошаговых действий. Особенностью списков этого типа является то, что все их элементы упорядочены.
Для создания