И так, продолжаем работу со списками, в прошлом уроке мы рассмотрели Упорядочнные списки и применение атрибутов для них. В этом уроке мы продолжим изучать списки и поговорим о неупорядоченных списках (ненумерованные списки). Этот вид списка используется так же достаточно часто, как и упорядочные списки. Разница между этими списками в том, что вместо цифр указываются черные маркеры для каждого элемента списка. Существует три вида маркеров это круг, диск и квадрат.
Для создания ненумерованного списка используется тег <ul> и его пара - закрывающийся тег </ul>, а элементы внутри так же заключаются в теги <li>. Тег <ul> является сокращением с английского языка Unsorted List и в переводе означает неупорядоченный список.
Ниже создадим пример обычного ненумерованного списка без использования атрибута type.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
</body> </html>
Если не указывать ни каких атрибутов, то по умолчанию маркеры примут вид в виде круга заполненного черным цветом.
Для изменения вида маркера используется атрибут type для тега <ul>. Ниже показаны варианты изменения вида маркеров.
- Элементы списка с маркером в виде круга type="disc"
- Элементы списка с маркером в виде окружности type=" circle"
- Элементы списка с маркером в виде квадратов type=" square"
Нужно помнить, что вид маркеров может, манятся при смене шрифта или текста, а также может, отображается по-разному в разных браузерах. Ниже создадим пример всех вариантов ненумерованных списков, а результат и Вы сможете просмотреть, нажав на ссылочку демо.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Ненумерованный список по умолчанию без указания атрибута "Type"
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указвываем атрибут type="disc".
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указвываем атрибут type="circle".
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указвываем атрибут type="square".
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
</body>
</html>
Мы и рассмотрели еще один вид списков, который очень часто используется при верстке шаблонов сайта. На этот вид списка рекомендую уделить немного больше внимания, чем на остальные. Возможно, дочитав до конца этот урок, у Вас возник вопрос, а если мне нужен совсем другой маркер, например: какая-то «птичка». Это так же возможно реализовать. Для этого берется заранее подготовленная картинка в виде нужного маркера и уже с помощь CSS таблицы стилей вставляется наш новый маркёр в список. Ну, об этом немного позже. В следующем уроке мы будем завершать со списками и рассмотрим самый редкий вид списка определения.
CSS