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

В этой заметке представлено несколько решений, которые помогут избавиться от стандартного вида списков <ul> <li>.

Преимущество данного оформления в том, что используется всего один класс: <ul class="CLASS">.

Такая конструкция сильно упрощает работу со списками в шаблонах и текстах.

Вариант 1a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 1b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 2a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 2b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 3a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 3b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 4a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 4b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 5a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 5b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

И, напоследок, самый простой, но и самый часто используемый вариант:

Вариант 6a:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
Вариант 6b:
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

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

  • Валерий:


    В первом комментарии что то картинки не было.

    Ответить
    • Alexander:

      1 - в примерах список ul, а не ol, соотв. этих цифр вообще быть не должно.
      2 - их убирает стиль list-style: none;, а у вас что то другое его значит включает.

      Ответить
  • Валерий:

    Александр, доброго времени суток, а как убрать родные цифры. Скрин приложил.

    css код такой.

    .list3a {
    	padding:0;
    	list-style: none;
    	counter-reset: li;
    }	
    .list3a > li {
    	position: relative;
    	border-left: 4px solid #337AB7;
    	padding:16px 20px 16px 28px;
    	margin:12px 0 12px 80px;
    	-webkit-transition-duration: 0.3s;
    	transition-duration: 0.3s;
    }
    .list3a > li:before {
    	line-height: 32px;
    	position: absolute;
    	top: 10px;
    	left:-80px;
    	width:80px;
    	text-align:center;
    	font-size: 24px;
    	font-weight: bold;
    	color: #77AEDB;
    	counter-increment: li;
    	content: counter(li);
    	-webkit-transition-duration: 0.3s;
    	transition-duration: 0.3s;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;	
    }
    .list3a > li:hover:before {
    	color: #337AB7;
    }
    .list3a > li:after {
        position: absolute;
        top: 26px;
        left: -40px;
        width: 60px;
        height: 60px;
        border: 8px solid #3399FF;
        border-radius: 50%;
        content: '';
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
        -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
        transform: translateX(-50%) translateY(-50%) scale(0.1);
        pointer-events: none;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;		
    }
    .list3a > li:hover:after {
        opacity: 0.2;
        -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
        -moz-transform: translateX(-50%) translateY(-50%) scale(1);
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
    Ответить
  • СЕРГЕЙ:

    Это прям классный сайт. Нет вот этого, где много умничают и вот это - "давным давно код произашёл... и т.д.")) Всё по факту, удобно и много классных фишек, действительно бесплатно! Я тут точно на долго! Спасибо создателям!
    И да, первый раз пишу коммент с благодарностью, прям захотелось!)))

    Ответить
    • Alexander:

      Спасибо за отзыв 🙂

      Ответить
  • Валерий:

    Доброго времени суток, а как можно сделать такую комбинацию.
    <ul class="list4a">
    <li>1 нумерованный</li>
    <ul class="list6b">
    <li>маркированный</li>
    <li>маркированный</li>
    <li>маркированный</li>
    </ul>
    <li>2 нумерованный</li>
    <li>3 нумерованный</li>
    </ol>

    Ответить
    • Alexander:

      Примерно так и сделать, только:
      1 - использовать правильный HTML:

      <ul class="list4a">
      	<li>нумерованный
      		<ul class="list6b">
      			<li>маркированный</li>
      			<li>маркированный</li>
      		</ul>		
      	</li>
      	<li>нумерованный</li> 
      </ul>

      2 - Чуть изменить CSS для нумерованного
      Было: .list4a li
      Нужно: .list4a > li
      и так для всех классов

      Ответить
  • Владимир:

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

    Ответить
  • жанна:

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

    Ответить
  • Надежда:

    а как это поставить на сайт? куда вставить html и css?

    Ответить
    • Alexander:

      html во что то с расширением .html, например index.html
      css во что то с расширением .css, например style.css

      А если серьезно, то откуда же я знаю, как у вас там...

      Ответить
      • Надежда:

        Очень помогли(

        Ответить
        • Alexander:

          С такими вопросами как у вас только в личек из контакто.
          И скороее всего не бесплатно
          https://atuin.ru/contacts/

          Ответить
    • СЕРГЕЙ:

      HTML - вставить код на странице в редакторе, нажав посмотреть код
      CSS - на хостинге, в каталоге сайта папка stylesheet.css и в самый низ
      Как-то так, если поможет))

      Ответить
  • Алибек:

    Во первых рахмет вам за вашу работу))

    Разрешите поинтересоваться. Я установил меню 4б. Но мой текст "ссылки" чуть смещен вниз, либо сами цифорки меню стоят выше. Какими пунктами можно отрегулировать высоту?

    Ответить
    • Alexander:

      Без ссылки или хотя бы скриншота сложно сказать...

      Ответить
  • irmaseo.ru:

    Очень полезная информация, спасибо

    Ответить
  • Sergey:

    А как сделать что бы отсчет начинался не с 1, а скажем с 5 ?

    Ответить
    • Alexander:

      Для ul стоит стиль counter-reset: li
      нужно поставить:

      counter-reset: li 4;

      т.е. 4 пропускаем и считаем с 5того

      Ответить
      • Sergey:

        А если надо сделать 9 li на три колонки, для каждой колонки прописывать свои стили?

        Ответить
        • Alexander:

          Можно использовать column-count:3; для ul
          Или разбить на 3 разных списка. В этом случае все классы и стили одинаковые.
          Только для 2х последующих списков добавить (можно прям в хтмл):

          <ul class="listN" style="counter-reset: li 3;">.....</ul>
          <ul class="listN" style="counter-reset: li 6;">.....</ul>
          Ответить
  • Иван:

    Спасибо, просто и со вкусом, одна идея очень пригодилась!

    Ответить
  • Владислав:

    Использовал метод 4а, спасибо.
    Было бы прикольно прикреплять сюда изображения, как применил способ.
    Как применил я - https://yadi.sk/i/ND2GI7NzeMMYAA

    Ответить
  • Сергей:

    Большое спасибо вам! Всё по-человечески сделано, всё удобно.

    Ответить
  • Тимур:

    добрый день. а если не жалко могли бы поделиться css как у вас сделано в Свежие записи и в метках.

    Ответить
    • Alexander:

      Как сделаны свежие записи - тут:
      https://atuin.ru/blog/oformlenie-ssylok-v-tekste-dokumenta/

      А метки просто кнопки, где один фон меняется на другой.

      Ответить
  • Рустам:

    Спасибо! Интересные решения! Но у меня почему-то точка (списка) присутствует всегда в каждой строке списка. Вариант 4, например, в самом круге. Как от нее избавиться?

    Ответить
    • Alexander:

      Попробуйте добавить к li
      list-style: none;
      Если не поможет, то добавить important
      list-style: none!important;

      Ответить
  • Федор:

    Замечательно, все прекрасно работает (я взял Вариант 1a), вот только как сделать что бы таблица не занимала всю ширину страницы.
    И будет ли работать это в мобильной версии сайта (ex-hort точка ру).

    Ответить
    • Alexander:

      Она и занимает всю ширину (100%), чтобы подстраивается под разные размеры, включая мобильные.
      Чтобы ограничить ширину, можно вставить ее в блок заданной ширины (адаптивный) или добавить классу .list1a :
      max-width: 500px;

      Ответить
      • Федор:

        Просто замечательно, все получилось. Как подписаться на ваши обновления в блоге? Не делая заказа или не для получить консультацию.
        Хочу предложить вам разместить у меня статью с открытой индексируемой ссылкой. Пишите на почту. admin собака ex-hort.ru

        Ответить
        • Alexander:

          У блога подписки нет, есть группа в ВК, куда дублирую статьи
          https://vk.com/atuin_ru

          Ответить
  • Олег:

    Мало что то вариантов

    Ответить