Страница 1 из 11
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Список разметки с использованием на CSS
Список разметки с использованием на CSS
Kosten
Дата: Понедельник, 27.11.2017, 22:36 | Сообщение 1
Администраторы
Сообщений:16015
Награды: 51


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

В этой статье вы узнаете, как добавить некоторую тонкую настройку 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(22Kb) · 8449984.png(9Kb)
Страна: (RU)
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Список разметки с использованием на CSS
Страница 1 из 11
Поиск: