ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создание нумерованного списка в HTML и CSS

Создание нумерованного списка в HTML и CSS

Иногда приходится поставить нумерованный список, что можно сделать через BB, коды, но также с применением стилей, что намного изящнее. Если вы решили использовать эти списки на ресурсе, то вам предложено несколько вариаций HTML, это неупорядоченные, упорядоченные или, что считают описанным методом поставлением приоритетов. Выбрав тот список, который больше подходит под информацию сводится к варианту, что будет отображаться этого содержимого.

Также можно приписать к дополнению к трем различным вариантам, что только доступных в HTML, существует много способов стилизации этих визуальных функций, при помощи CSS. Как пример, у вас есть возможность выбора тип маркера для прописывания на странице. Здесь нужно понимать, что маркер идет в нескольких вариаций, это круглым, числовым и также алфавитный относится. Здесь у вас есть решение, должен ли список отображаться вертикально или горизонтально. Что безусловно все представленные варианты играют значительную роль в оформлении на интернет ресурсе, а точнее на страницах модуля или на главной.

Демонстрация:

Неупорядоченный список

Здесь идет установка неупорядоченного списка, что создан в HTML выполняется с использованием элемента блоков. Где каждый индивидуально помечен при помощи CSS.

HTML

Код

<ul>
  <li>Скрипты для uCoz</li>
  <li>Шаблоны для uCoz</li>
  <li>Стили на сайт</li>
</ul>

CSS

Код

ul {
list-style: disc;
padding-left: 39px;
}

Твердое обозначение как точка, также называемым маркером в списке, где можно изменить на стилях CSS.

Упорядоченный список

Также не нужно забывать, что отдельные элементы списка можно создать в аналогичным способом. Если есть какое то различие, то оно между упорядоченным списком и неупорядоченным списком состоит в том, что с упорядоченным безусловно важен порядок вывода в котором представлены элементы.

Понимая, что порядок имеет оригинальное значение, то вместо того, чтобы использовать точку виде маркера для списков, где идет по умолчанию, то упорядоченный список будет использует числа.

Демонстрация:

HTML

Код

<ol>
  <li>ZorNet: Создание сайта на uCoz</li>
  <li>ZorNet.Ru » Создание сайтов для uCoz</li>
  <li>Создать сайт самостоятельно</li>
</ol>

CSS

Код

ol {
list-style: decimal;
padding-left: 29px;
}

По умолчанию упорядоченные ставятся с цифры один. Но здесь могут быть изменение вывода цифр, это когда к примеру изначально начнется с 30 или на другого номера, где можно разделить на несколько блоков. При использовании ol элемента, где можем изначально определить из какого числа должен начинаться подсчет списка.

Все атрибуты принимает только цельные значения несмотря на установленные списки, что могут использовать в различной нумерации, как пример римские цифры.

Демонстрация:

HTML

Код

<ol start="30">
  <li>Сделать графику знаков в 3D</li>
  <li>Оригинальный вид материалов </li>
  <li>Блочный вид материалов</li>
</ol>

CSS

Код

ol {
list-style: decimal;
padding-left: 37px;
}

Теперь вы можете красиво оформить списки, что будут красиво и по теме смотреться на разной тематической площадке, где как на темный и светлый все идет в аналогичном стиле.

11 Декабря 2017 Просмотров: 1708 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0