По порядку становись!
УРОК «Как изменить тип маркера списка»
Дорогие друзья!
В этом уроке предлагаю рассмотреть способ изменения маркера нумерованных и маркированных списков.
На самом деле, это несложно: нужно внутри открывающего тега <ol> для
нумерованного списка или внутри <ul> для маркированного списка
указать атрибут type="значение" с нужным значением и вид маркера изменится.
Для наглядности представим примеры использования различных маркеров в виде таблицы:
Маркеры для нумерованного списка
Вид маркера | Пример кода | Результат |
Арабские цифры |
<ol type="1">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
|
- Пункт 1
- Пункт 2
|
Строчные римские цифры |
<ol type="i">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
|
- Пункт 1
- Пункт 2
|
Прописные римские цифры |
<ol type="I">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
|
- Пункт 1
- Пункт 2
|
Прописные латинские буквы |
<ol type="A">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
|
- Пункт 1
- Пункт 2
|
Строчные латинские буквы |
<ol type="a">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
|
- Пункт 1
- Пункт 2
|
Маркеры для маркированного списка
Вид маркера | Пример кода | Результат |
Диск |
<ul type="disc">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
|
|
Круг |
<ul type="circle">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
|
|
Квадрат |
<ul type="square">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
|
|
Вы также можете задавать для отдельных пунктов списка разные маркеры, в этом случае атрибут type="значение"
нужно будет применять к элементу li каждого пункта со своим значением.
Кроме того, можно совсем отменить отображение маркеров списка. Для этого нужно задать значение атрибута type
каждого элемента списка li как none, например:
Пример кода | Результат |
<u>Список:</u>
<ol>
<li type="none">Пункт 1</li>
<li type="none">Пункт 2</li>
</ol>
|
Список:
- Пункт 1
- Пункт 2
|
До встречи в следующем уроке!
|