Красивый список css

Обновлено: 6 апреля 2020Опубликовано
красивый_список_css
Такой список, оформленный с помощью ccs, можно использовать для навигации. Например, таким образом можно оформить разделы блога или страницы.
Перейдите по кнопке Demo для просмотра работы списка в действии. Однако, у вас он будет несколько отличаться от нашего – не будет радужного перелива ссылок. Если вы хотите добиться и этого, то вам нужно установить анимацию ссылок, как я рассказывала ранее.
      ..

Переходим к созданию красивого списка на css.

  1. Админпанель blogger –> Шаблон –> Изменить html. Находим код <body> и сразу после него вставляем:

    <style type="text/css">
    /* красивый список css */
    ol{
    counter-reset: li; 
    list-style: none; 
    *list-style: decimal; 
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }

    ol ol{
    margin: 0 0 0 2em; 
    }
    .rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    }
    .rounded-list a:hover{
    background: #eee;
    }
    .rounded-list a:hover:before{
        transform: rotate(360deg);
    }
    .rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    }
    </style>

    Сохраните шаблон

  2. Теперь создаем сообщение (если хотите вставить список в отдельное сообщение блога), страницу или во вкладке Дизайн создаем новый элемент HTML / Javascript и вставляем непосредственно код списка:

    <ol class="rounded-list">
    <li><a href="Ссылка на первую страницу" target="_blank">Первая страница</a></li>
    <li><a href="Ссылка на вторую страницу" target="_blank">Вторая страница</a></li>
    <li><a href="Ссылка на третью страницу" target="_blank">Треться страница.</a></li>
    <li><a href="Ссылка на четвертую страницу/" target="_blank">Четвертая страница.</a></li>
    </ol>

Небольшое отступление – Google Adsense и статистика pluso выявили подозрительную ссылку вида бла-бла-бла.scoonter.ru. В начале этой ссылки был набор символов. Я уже давно ничего не меняла в своем блоге, не добавляла посторонних скриптов, не ссылалась на такие подозрительные сайты, поэтому первой моей мыслью было – взлом, вирус и пр. Оказалось, что сайт scoonter открывает недоступные веб-страницы. Я знаю о том, что мой блог недоступен у некоторых провайдеров. Виной тому собственный домен на blogger. Так что, если вы обнаружили у себя похожую ситуацию, то вот ответ. Кстати, если вы скачали подозрительную программу, то удалить вирус вы сможете с помощью специалиста.

Как создать разделы блога и оформить его с помощью списка?

Когда вы пишите сообщения в блог, то не забывайте добавлять метки (ярлыки) по смыслу. Если вы перейдете по ссылке отдельного ярлыка, то попадете на страницу с сообщениями одной тематики. Так вы можете условно создать тематический раздел в блоге Blogspot. Скопируйте ссылку метки и подставьте ее во второй код списка вместо “Ссылка на первую/вторую … страницу”. Дайте соответствующее название разделу. Повторите действия с другими ссылками. Сохраните изменения.

Опубликовано Иванова Наталья

5 ответов к «Красивый список css»

  4. Привет!
    Создал такой список у себя, почему то стили не подгрузились...
    Видимо на Вашей cms только работает.

    Ответить

  5. Денис Михайлович, все должно работать независимо от cms.
    Проверьте правильность подключения стилей.

    Ответить

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

Ваш адрес email не будет опубликован.