Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
В списке непременно должен присутствовать закрывающий тег
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега
| Тип списка | Код HTML | Пример |
|---|---|---|
| Список с маркерами в виде круга |
|
|
| Список с маркерами в виде окружности |
|
|
| Список с квадратными маркерами |
|
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Изменение убеждений
Результат данного примера показан на рис. 11.2.
Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений) .
Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена.
Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным.
По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:
Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type.
Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список - совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:
|
|
|
|
|
|
|
|
|
|
Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.
Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):
Еще один вид списков html - список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd - описание этого термина.
Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях.
Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от , поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail . На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.
Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список.
Синтаксис тега
- Элемент #1
- Элемент #2
- Элемент #3
- ...
Где атрибут type="value" может принимать следующие значения
Атрибут start="value" задает начальное значение (стартовое значение) отчета.
Атрибут reversed задает обратный счет (в случае необходимости).
Тег
Для формирования элементов списка используется парный тег
Примечание
Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value="" у тега
- Элемент #1
- Элемент #2
- Элемент #3
Пример с заглавными буквами
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
- Элемент #10
- Элемент #11
- Элемент #12
Вот как это выглядит на странице:
Пример с заглавными буквами
- Элемент #1
- Элемент #2
- Элемент #3
Вот как это выглядит на странице:
Пример со строчными буквами
- Элемент #1
- Элемент #2
- Элемент #3
Вот как это выглядит на странице:
Пример, который показывает возможности атрибута start , который позволяет задавать стартовое значение счетчика.
- Элемент #1
- Элемент #2
- Элемент #3
Вот как это выглядит на странице:
Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Вот как это выглядит на странице:
Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Вот как это выглядит на странице:
HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
маркированный список —
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега
. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.Браузеры по умолчанию добавляют следующее форматирование блоку списка:
Каждый элемент списка создаётся с помощью парного тега
Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента
Блок списка также имеет стили браузера по умолчанию:
Для тега
| Атрибут | Описание, принимаемое значение |
|---|---|
| reversed | Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). |
| start | Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция
|
| type | Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv). |
Списки определений создаются с помощью тега
Блок списка определений имеет следующие стили браузера по умолчанию:
Для тегов
Рис. 3. Список определений
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов . Разметка для вложенного списка будет следующей:
Рис. 4. Вложенный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
Ol {
/* убираем стандартную нумерацию */
list-style: none;
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */
counter-reset: li;
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li;
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". ";
}
Рис. 5. Многоуровневый нумерованный список
Исходя из основ, мы теперь более подробно рассмотрим элементы, используемые для обеспечения структуры и значения для различных частей дизайн. Если кто не знает, то ul и li, это гораздо лучший вариант, чем простой текстовый текст, потому что, когда текст обертывается, особенно в мобильном телефоне, он отлично отступы и не обтекает маркер.
Считается, что списки, это отличный способ изложения информации на страницах, потому что они просты для чтения и выглядят хорошо. Многие люди, похоже, думают, что точки пули, это маленькие изображения, но на самом деле все они созданы через довольно простой HTML код. Вы можете вставлять разные типы списков друг в друга, если хотите, просто не забудьте закрыть их правильно. Вы можете играть с текстом, который вы хотите, во всех этих командах списка.
Также нужно знать, что списки изначально содержат несколько элементов:
1
. Неупорядоченная информация.
2
. Упорядоченная информация.
3
. Определения.
Приступаем к установке:
1. Вариант:
Ksangelopan {
margin: 19px 0 0;
padding:0;
list-style: none;
counter-reset: li;
}
.ksangelopan li {
border: 2px solid #3575ad;
background: #d7dee4;
position: relative;
margin-bottom: 17px;
padding: 15px 9px;
}
.ksangelopan li:hover {
z-index: 1;
}
.ksangelopan li:before {
border: 2px solid #2270b3;
position: absolute;
top: -14px;
padding: 3px 9px;
font-size: 11px;
font-weight: bold;
color: #246eaf;
background: #f2f4f7;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.ksangelopan li:hover:before {
background: #2672b3;
color: #f7f9fb;
-webkit-transform: translate(-11px, 0);
-ms-transform: translate(-11px, 0);
-o-transform: translate(-11px, 0);
transform: translate(-11px, 0);
}
.ksangelopan li:after {
content: "";
position: absolute;
transition-duration: 0.3s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #FFF;
height: 100%;
left: 0;
top: 0;
width: 0;
}
.ksangelopan li:hover:after {
width: 100%;
}
2 Второй вариант:
Beleduzlopamges {
margin-bottom: 8px;
padding:0;
list-style: none;
counter-reset: li;
}
.beleduzlopamges li {
position: relative;
border: 2px solid #195588;
background: #eff3f7;
padding: 15px 19px 15px 27px;
margin: 12px 0 12px 40px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.beleduzlopamges li:hover {
background: #FFF;
}
.beleduzlopamges li:before {
line-height: 32px;
position: absolute;
top: 4px;
left: -39px;
width: 39px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #f9f5f5;
background: #275b88;
counter-increment: li;
content: counter(li);
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:before {
width:46px;
}
.beleduzlopamges li:after {
position: absolute;
left: 0;
top: 4px;
content: "";
height: 0;
width: 0;
border: 16px solid transparent;
border-left-color: #275b88;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.beleduzlopamges li:hover:after {
margin-left: 6px;
}
3 Третий вариант:
Nizualisanelag {
padding:0;
list-style: none;
counter-reset: li;
}
.nizualisanelag li {
position: relative;
padding: 9px 17px 17px 25px;
margin-left: 39px;
transition-duration: 0.2s;
cursor: pointer;
font-weight: bold;
color: #343638;
}
.nizualisanelag li:before {
border: 3px solid transparent;
line-height: 35px;
position: absolute;
top: 0;
left:-29px;
width:41px;
text-align:center;
font-size: 14px;
font-weight: bold;
color: #619dce;
counter-increment: li;
content: counter(li);
transition-duration: 0.3s;
box-sizing: border-box;
}
.nizualisanelag li:hover:before {
color: #337AB7;
}
.nizualisanelag li:after {
position: absolute;
top: 0;
left: -29px;
width: 41px;
height: 41px;
border: 5px solid #468bd0;
border-radius: 50%;
content: "";
opacity: 0.5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nizualisanelag li:hover:after {
animation: 500ms ease-in-out 0s bounceIn;
opacity: 1;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.3, 1.3, 1.3);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
4 Четвертый вариант:
Padding:0;
list-style: none;
}
.kudezamuden li{
padding:6px;
}
.kudezamuden li:before {
padding-right: 11px;
font-weight: bold;
color: #4979a0;
content: "\2606";
transition-duration: 0.4s;
}
.kudezamuden li:hover:before {
color: #235e90;
content: "\2605";
}
Вообщем это небольшая подборка списков, даст веб мастеру сделать красивый список на портале, где сам может его больше оформить, как он сам хочет его видеть.
Если вам нужно помещать предметы в нумерованный список вместо маркированного, то здесь будет использоваться упорядоченных HTML. Этот список создается с помощью ol тега. Нумерация начинается с единицы и увеличивается на единицу для каждого последующего упорядоченного элемента списка с li тегом.
