• Страница 1 из 1
  • 1
Список разметки с использованием на CSS
Kosten
Понедельник, 27 Ноября 2017, 22:36 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Красивые упорядочные списки всегда было сложной задачей, где не единственный кто думает об этом. В номера стилей вам нужно удалить стили браузера по умолчанию и добавить элементы списка в элементы списка, чтобы настроить их соответственно.

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

HTML-код

Ниже вы найдете только простую упорядоченную разметку списка.

Код
<ol class="rounded-list">
    <li><a href="">Сайт ZORNET.RU</a></li>
    <li><a href="">Сайт ZORNET.RU</a></li>
    <li><a href="">Сайт ZORNET.RU</a>
        <ol>
            <li><a href="">Упорядоченный список</a></li>
            <li><a href="">Упорядоченный список</a></li>
            <li><a href="">Упорядоченный список</a></li>
        </ol>
    </li>
    <li><a href="">Сайт ZORNET.RU</a></li>
    <li><a href="">Сайт ZORNET.RU</a></li>                       
</ol>


CSS

Далее я попытаюсь объяснить, как это работает в нескольких словах.

Этот метод использует автоматические счетчики и нумерацию. В основном речь идет об использовании двух свойств CSS 2.1: counter-reset это инициирует счетчик и counter-increment что-то само собой разумеющееся, это увеличивает предыдущий счетчик. Как вы увидите ниже counter-incrementони будут использоваться вместе с CSS-контентом псевдоэлементы.





Закругленные фигуры



Прямоугольные номера



CSS



Некоторые анимации номеров CSS3 также включены в эту демонстрацию. Насколько я знаю, и в настоящее время Firefox является единственным кто поддерживает анимированные псевдоэлементы. Будем надеяться, что это рано или поздно улучшится.
Прикрепления: 3300160.png (22.3 Kb) · 8449984.png (8.7 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: