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

Нумерованный список при помощи CSS и HTML

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

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

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

1. Здесь мы добавили значение счетчика к content нашему::before. Стоит отметить, что, используя счетчики CSS с содержимым, мы можем объединить.
2. Сгенерированные числа со строками.
3. Мы ссылаемся на имя нашего счетчика
4. И определите стиль счетчика как «десятичный». Возможные значения здесь аналогичны тем, которые используются для list-style-type свойства.
5. В counter-increment правиле мы снова ссылаемся на имя нашего счетчика
затем используйте необязательный параметр, чтобы указать, на сколько счетчик увеличивается. Значение по умолчанию: 1.

Переходим к установке:

HTML

Код

<ol>
  <li>
  <h4>ZORNET.RU</h4>
  <p>Здесь находится описание под любую тематику, что можно поставить ссылку на переход по сайту.</p>
  </li>
  <li>
  <h4>ZORNET.RU</h4>
  <p>Здесь находится описание под любую тематику, что можно поставить ссылку на переход по сайту.</p>
  </li>
  <li>
  <h4>List Item</h4>
  <p>Описание.</p>
  <p>Второе описание.</p>
  </li>
  <li>
  <h4>List Item</h4>
  <p>Описание.</p>
  </li>
</ol>

CSS

Код

ol, li, p, h4 {
  margin: 0;
}

body {
  background: #FFF;
  max-width: 80%;
  width: 500px;
  margin: 40px auto;
  font: normal 16px/24px "Montserrat", "Helvetica Neue", sans-serif;
}

h3 {
  font-size: 1.53rem;
  margin: 14px 0;
  text-align: center;
}

ol {
  counter-reset: section;
}

li {
  list-style-type: none;
  position: relative;
  font-size: 1.3rem;
  padding: 14.7px;
  margin-bottom: 14.7px;
  background: #075011;
  color: #f1ecec;
}

h4 {
  position: relative;
  padding-bottom: 10px;
}

h4:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 2px;
  background: white;
}

p {
  font-size: .9rem;
  line-height: 1.4rem;
  margin-top: 15px;
}

li::before {
  counter-increment: section;
  content: counter(section);
  text-align: center;
  display: inline-block;
  color: #000;
  border-radius: 50%;
  position: absolute;
  left: -65px;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px;
  font-size: 2rem;
  width: 25px;
  height: 25px;
  border: 2px solid #000;
}

В этом кратком мануале узнали, как использовать счетчики CSS для упорядочения упорядоченных элементов списка. Давайте кратко изложим, что мы рассмотрели.

Счетчики CSS - отличное решение для каждого проекта, который требует динамического упорядочения с использованием пользовательских стилей. С другой стороны, это не полностью доступное решение, поэтому имейте в виду его ограничения и используйте его правильно.

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

10 Февраля 2018 Просмотров: 2560 Комментариев: (0)

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

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

Kosten

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