Списки являются неотъемлемыми элементами каждого сайта. И разработчиками w3c предусмотрен определенный стандартный функционал, за пределы которого, редко кто выходит. Как правило, списки используют в качестве ненумерованного или нумерованного вертикального/горизонтального перечисления контента. И стилизуют обычно только текст или маркеры. По этой причине списки приедаются и не выделяются таким образом, чтобы привлечь гостей сайта. В этом уроке мы с вами оформим наш список нестандартным образом. А что, если вместо стандартных (1, 2, 3, 4...) мы хотим, чтобы наш список маркировался как (пункт 1:, пункт 2: и т.д.) ? Давайте попробуем этого добиться. Также сделаем стиль шрифта и цвет маркера отличным от контента списка.
Для создания списка с настраиваемым маркером вам надо перекопировать следующие части кодов:
<ol class="special_markers"> <li> Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, consequuntur. </li> <li>Lorem ipsum dolor sit amet consectetur.</li> <li>Lorem ipsum dolor sit amet consectetur.</li> <li>Lorem ipsum dolor sit amet consectetur.</li> <li>Lorem ipsum dolor sit amet consectetur.</li> <li>Lorem ipsum dolor sit amet consectetur.</li> <li>Lorem ipsum dolor sit amet consectetur.</li> </ol>
.special_markers { max-width: 500px; padding-right: 7px; } .special_markers li { counter-increment: SpecialMarker; margin-bottom: 15px; list-style: none; color: cadetblue; } .special_markers li::before { content: "пункт " counter(SpecialMarker) ": "; font-family: cursive; font-weight: 700; font-size: 24px; color: red; margin-right: 10px; }
После копирования вышеупомянутых кусков кода у вас должен появиться такой список:
Наш список готов. Для корректной работы маркеров списка рекомендуем не менять класс тега ol и не вносить изменения в селекторе CSS: .special_markers li::before {}, если не обладаете опытом работы со свойством content.
Вы будете получать статьи по нашим направлениям, советы и кейсы предпринимателей
Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.
В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей
Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.
Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.
Сегодня напишем с вами анимацию карточки-конверта.
*Условия акции: получить приз можно после заключения договора и реализации заказанной услуги.