Красивые списки css примеры: Оформление списков ul li для информационных блоков

Группа списков. Компоненты · Bootstrap. Версия v4.0.0

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

Базовые примеры

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

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Активные элементы

Добавьте в . list-group-item

класс .active для обозначения текущего активного выбора.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Неактивные элементы

Добавьте класс .disabled к элементу класса .list-group-item для придания последнему вида «неактивного». Заметьте, что некоторые элементы класса

.disabled также потребуют JavaScript для полной деактивации их событий клика (например, ссылки).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Используйте <a>

или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них . list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.

Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае

.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

В <button> вы можете также использовать атрибут disabled вместо класса .

disabled. К сожалению, <a> не поддерживают отключенный атрибут.

<div>
  <button type="button">
    Cras justo odio
  </button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button" disabled>Vestibulum at eros</button>
</div>

Смывание

Добавьте класс .list-group-flush

чтобы удалить некоторые границы и закругленные углы, а также чтобы отображать элементы группы списка от края до края в родительском контейнере (например, в карточках).

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Контекстуальные классы

Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.

• Dapibus ac facilisis in
• Элемент основной группы списков
• Дополнительный элемент группы списков
• Элемент группы списка успешных действий
• Элемент группы списка опасности
• Элемент группы списка предупреждений
• Элемент группы списка информации
• Элемент группы с легким списком
• Элемент группы темных списков

<ul>
  <li>Dapibus ac facilisis in</li>

  
  <li>Элемент основной группы списков</li>
  <li>Дополнительный элемент группы списков</li>
  <li>Элемент группы списка успешных действий</li>
  <li>Элемент группы списка опасности</li>
  <li>Элемент группы списка предупреждений</li>
  <li>Элемент группы списка информации</li>
  <li>Элемент группы с легким списком</li>
  <li>Элемент группы темных списков</li>
</ul>

Контекстуальные классы также работают с классом .

list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.

Dapibus ac facilisis in Элемент основной группы списков Дополнительный элемент группы списков Элемент группы списка успешных действий Элемент группы списка опасности Элемент группы списка предупреждений Элемент группы списка информации Элемент группы с легким списком Элемент группы темных списков

<div>
  <a href="#">Dapibus ac facilisis in</a>

  
  <a href="#">Элемент основной группы списков</a>
  <a href="#">Дополнительный элемент группы списков</a>
  <a href="#">Элемент группы списка успешных действий</a>
  <a href="#">Элемент группы списка опасности</a>
  <a href="#">Элемент группы списка предупреждений</a>
  <a href="#">Элемент группы списка информации</a>
  <a href="#">Элемент группы с легким списком</a>
  <a href="#">Элемент группы темных списков</a>
</div>

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Со значками

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

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

<ul>
  <li>
    Cras justo odio
    <span>14</span>
  </li>
  <li>
    Dapibus ac facilisis in
    <span>2</span>
  </li>
  <li>
    Morbi leo risus
    <span>1</span>
  </li>
</ul>

Стандартное содержимое

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

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<div>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus.  Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>

Поведение JavaScript

Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap. js — для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.

Home Profile Messages Settings

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<div>
  <div>
    <div role="tablist">
      <a data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div>
    <div>
      <div role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Используя атрибуты

Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.

<!-- List group -->
<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Через JavaScript

Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):

$('#myList a').on('click', function (e) {
  e. preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельный элемент списка несколькими способами:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first').tab('show') // Select first tab
$('#myList a:last').tab('show') // Select last tab
$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed)

Эффект угасания

Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade в каждый элемент класса .tab-pane. На первой панели вкладки также должно быть выставлено значение .show, чтобы сделать начальное содержимое видимым.

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Методы

$().

tab

Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target, или href «нацеленный» на «узел контейнера» в DOM.

<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab(‘show’)

Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).

$('#someListItem').tab('show')

События

При показе новой вкладки события запускаются в таком порядке:

1. hide.bs.tab (на текущей активной вкладке)
2. show.bs.tab (на вкладке, которая вот-вот покажется)
3. hidden.bs.tab (на предыдущей активной вкладке, такое же, как для события hide.bs.tab)
4. shown.bs.tab (на вкладке, только что ставшей активной и только что ставшей показанной, такое же, как для события show.bs.tab)

Если ни одна вкладка еще не была активной, события hide.bs.tab и hidden.bs.tab не произойдут.

Тип события	Описание
show.bs.tab	Используйте события event.target и event.relatedTarget для «нацеливания» на соответственно на активную и предыдущую активную (если она доступна) вкладки.
shown.bs.tab	Это событие наступает при показе вкладки, после того, как она показана. Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную и предыдущую активную (если она доступна) вкладки.
hide.bs.tab	Это событие наступает, когда вот-вот покажется новая вкладка (и предыдущая, т.о., вот-вот скроется). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на активную текущую вкладку и ту, которая вот-вот откроется.
hidden. bs.tab	Это событие наступает, когда показана новая вкладка (и предыдущая активная, т.о., скрылась). Используйте события event.target и event.relatedTarget для «нацеливания» соответственно на предыдущую активную и новую активную вкладки.

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Список популярных названий классов CSS

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container, holder, box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)

row — контейнер в виде строки

col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

Изображения

image, img, picture, pic — картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Медиавыражения

phone, mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

tablet — планшеты

notebook, laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

small — небольшой

medium — средний

big, large — большой

huge — огромный

narrow — узкий

wide — широкий

Состояния

active, current — активный элемент, например, текущий пункт меню

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Дополнительно

search — поиск

socials — блок иконок соцсетей

advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features, benefits — список основных особенностей товара, услуги

slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user, author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart, basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more, all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip, tip — всплывающие подсказки

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

Источник: «Слова, часто используемые в CSS-классах»

10 фрагментов CSS для добавления творчества в списки HTML

Эрик Карковак
on 23 февраля 2021 г. CSS

HTML-список — один из немногих выживших в мире одноразового веб-дизайна. Тенденции приходят и уходят, но как упорядоченные

, так и неупорядоченные
списки по-прежнему полезны как никогда.

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

Мы сформировали поисковую группу, чтобы прошерстить Интернет в поисках признаков креативных HTML-списков. Оказывается, некоторые талантливые дизайнеры действительно выходят за рамки простых маркеров и цифр. Взглянем!

Цвет и размер

Одна потенциальная проблема для длинного списка заключается в том, что может быть трудно выделить каждый элемент. В этом прелесть этого примера. Каждое число выделено жирным шрифтом и градиентным фоном. Более того, каждая часть контента использует CSS 9.0008 box-shadow для добавления глубины. В результате получается что-то привлекательное и легко читаемое.

Мобильное решение

Чем больше мы видим людей, безучастно смотрящих в свои телефоны, бесконечно прокручивающих в бездну, тем легче оправдать создание длинных страниц. Тем не менее, каждый бит прокрутки требует времени. Вот где этот эксперимент становится интересным. То, что отображается на больших экранах в виде неупорядоченного списка из нескольких столбцов, на мобильных устройствах превращается в простой абзац, разделенный запятыми. Это экономит время и усилия пользователей, которые лучше потратить на что-то другое (например, на прокрутку своей ленты в Facebook).

Простота

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

С другой стороны…

Воспринимайте этот анимированный 3D-список как полную противоположность приведенному выше. Это привлекает внимание (в хорошем смысле). Он сочетает в себе SVG и JavaScript, чтобы сделать эту короткую группу маркеров чем-то необычным. Это может быть отличным дополнением к онлайн-презентации или целевой странице.

Простая временная шкала

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

Вложенные числа

Бывают случаи, когда упорядоченный список должен включать несколько уровней вложенности, следуя последовательному числовому шаблону. К счастью, CSS counter-reset упростит автоматическую нумерацию. В этом примере список идет на четыре уровня вглубь, а нумерация соответствует его примеру.

Более стильное гнездо

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

Преимущества сетки

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

Бонус: все списки

В CSS имеется ряд встроенных опций стиля списка — больше, чем вы думаете. Эта ручка предлагает удобное краткое изложение различных стилей, а также примеры использования изображений и значков Font Awesome вместо традиционных маркеров.

Top Listings

HTML-списки — один из самых гибких и незаменимых элементов дизайна. Когда вы смотрите глубже, просто удивительно представить, как часто мы их используем.

Когда дело доходит до добавления списков к нашему контенту, они часто оставляют желать лучшего. Однако приведенные выше примеры являются доказательством того, что нам не нужно соглашаться на значение по умолчанию. Немного CSS (и даже капелька JavaScript) могут сделать содержимое списка более интересным и легким для чтения.

10+ списков CSS (последняя коллекция)

CSS | Обновлено 28 марта 2022 г.

Новейшая и уникальная коллекция отобранных бесплатных примеров списков HTML и CSS с кодами. Обновлено в марте 2022 г.

Редактор

Автор Марк Ботинки

Демо и код

Используемая технология HTML/CSS

Что это?

Карточки со стрелками упорядоченного списка

Тип стиля списка css числовой, крутые списки css, примеры списков css

Автор Фред

Демо и код

Используемая технология HTML/CSS/JS

Что это?

Template – Fancy List

css списки без маркеров, css стиль списка значок типа svg, css шаблоны списков

Автор Селим Рана

Демо и код

Используемая технология HTML/CSS (SCSS)

Что это?

Избранный список чистый html css

тип стиля списка css изображение, крутые списки css, тип стиля списка css числовой

Автор ПСР

Демо и код

Используемая технология HTML/CSS

Что это?

Пользовательские маркеры

как стилизовать элемент списка с помощью css, значок типа стиля списка css, стиль списка css codepen

Автор Совмья Сешадри

Демо и код

Используемая технология HTML/CSS (SCSS)

Что это?

Карточки – ListView

html css эффекты наведения элемента списка, примеры стилей списка css, дизайн элемента списка css с помощью css

наведите курсор, чтобы играть

Автор Бирманский картофель

Демо и код

Используемая технология HTML/CSS

Что это?

Pretty Sticky

дизайн списка css, тип стиля списка css числовой, стиль списка css codepen

наведите курсор, чтобы играть

Автор Марк Эрикссон

Демо и код

Используемая технология HTML/CSS/JS

Что это?

Таблица лидеров Forbes

HTML css эффекты наведения на элемент списка, изображение типа стиля списка css, стиль списка css codepen

наведите курсор, чтобы играть

Автор Дайан Ассен

Демо и код

Используемая технология HTML/CSS (SCSS)

Что это?

100dayscss #27

крутые списки css, эффекты элементов списка html css, список задач с использованием html css

Автор Ирешеп

Демо и код

Используемая технология HTML/CSS

Что это?

Css List Playground

стиль списка css codepen, тип стиля списка css числовой, списки css без маркеров

Автор Инес Монтани

Демо и код

Используемая технология HTML/CSS

Что это?

Нумерованные списки только с помощью CSS с формами «капля»

Тип стиля списка css числовой, примеры списков css, дизайн элемента списка css с помощью css

Подпишитесь на наш канал Youtube, чтобы получать регулярные обучающие видео по WordPress, Elementor, веб-дизайну и разработке , стратегии веб-сайта и социальных сетей и т.