Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

красивое оформление нумерованного списка

 Приветствую,  всех. Вариантов оформления списков на странице блога достаточно много. Блогеер нам предоставил опцию нумерованных и маркированных списков, но выглядят они, скажем, совсем не очень. При оформлении статей в блоге обязательно нужно обращать внимание, что контент должен состоять не только из "сухого' текста. Когда присутствует в сообщении выделенные цитаты, какие  -то важные моменты, инфографика, списки, читателю сайта проще и удобнее воспринимать информацию. Сегодня опять про них.

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

Для начинающих не большое пояснение. Код обычного списка в HTML выглядит так. 

<ol>
<li> первые блюда </li>
<li> вторые блюда </li>
<li> десерты</li>
</ol>

В результате мы будем иметь самый простой список такого вида.

нумерованный список

Простой и скучный список. Но когда добавляем  стили, тот же список будет выглядеть так. Нумерация идёт в красивых квадратиках. 

стили нумерованного списка


Код такой

<ol>
<li> первые блюда </li>
<li> вторые блюда </li>
<li> десерты</li>
</ol>
<style> 
ol{
counter-reset: myCounter;
}
 
li{
list-style: none;
}
 
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9; /* цвет фона квадрата*/
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
/* размеры квадрата */
width: 40px; 
height: 40px;
}</style> 



Не хотите квадратики сделаем кружочки с помощью свойства border-radius: 50px;  

список нумерованный

 Код такой

<ol>
<li> первые блюда </li>
<li> вторые блюда </li>
<li> десерты</li>
</ol>
<style> 
ol{
counter-reset: myCounter;
}
 
li{
list-style: none;
}
 
li:before {
counter-increment: myCounter;
content:counter(myCounter);
color: white;
background: #2980B9; /* цвет фона */
display: inline-block;
text-align: center;
margin: 5px 10px;
line-height: 40px;
width: 40px;
height: 40px;
border-radius: 50px;
}</style> 


А сейчас вообще красоту сделаем с подпунктами списка и hover  эффектом при наведении

оформление нумерованного списка


Это код для последнего варианта

<style>
ol {
counter-reset:myCounter;
margin-left:0;
padding-left:5px;
color: rgb(100,100,100);
}
 
li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
 
li:hover {
color: rgb(0,0,0);
}
 
li:before {
content:counter(myCounter);
counter-increment:myCounter;
position:absolute;
top:0;
left:0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding:0px;
color:#fff; /* цвет текста*/
background:#2980b9;  /* цвет фона*/
font-weight:bold;
text-align:center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
 
li:hover:before {
background-color:#DC143C; /* цвет линии*/
}
 
li li:before{
background-color: #3498db;
}
 
li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(255, 160, 122); 
z-index: 0;
}
 
li:hover:after {
background-color: #DC143C; /* цвет при наведении на пункт меню*/
}
 
li li {
font-size: 0.8em;
}</style>
<h2>Рецепт - блины тонкие</h2>
<ol>
<li>
Приготовьте сковородку
</li>
<li>
В большой миске смешайте ингредиенты:
<ol>
<li>Яйца - 3 шт.</li>
<li>Молоко - 250 мл (1 стакан)</li>
<li>Вода - 300-400 мл (1-2 стакана)</li>
<li>Сахар - 2 ст. ложки</li>
<li>Мука - 240 г (1,5 стакана)</li>
</ol>
</li>
<li>
Всё содержимое хорошо взбейте до однородной массы. 
</li>
<li>
Прокалите на огне сковороду и смажьте её маслом
</li> <li>
Налить на середину сковороды немного теста (примерно 0,5 обычного половника). Наклоняя сковороду в разные стороны, распределить тесто по поверхности. Жарить на среднем огне 0,5 минуты.
</li> <li>
Затем аккуратно приподнять блин (руками или лопаточкой), перевернуть его на другую сторону и жарить еще 10-30 секунд. 
</li>
</ol>

Вы можете в код по необходимости добавлять нужные пункты в теги <ol> и <li>.  Все стили в кодах я закомментировала. Меняйте на ваш вкус. Очень уместно такие списки применять в блогах кулинарной тематики, блогах учителей, Использовать как списки дел, создания меню, да вообще перечень чего - то. 
И Блоггере код списка устанавливается в редакторе сообщения, в режимеHTML в нужном месте поста. 

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

Ещё статья про оформлении нумерованного списка в сообщении.


12 комментариев:

  1. К сожалению, не нашел картинок. Но верю, что красиво.

    ОтветитьУдалить
  2. Семён в посте картинки для наглядности. А для рабочего варианта нужно скопировать каждый из кодов и установить в редакторе. Ссылка тоже в сообщении.

    ОтветитьУдалить
  3. Красота! Себе возьму обязательно!!

    ОтветитьУдалить
    Ответы
    1. Ирина, они в блогах твоей тематики очень даже к месту будут. Ну ты придумаешь, что со списками делать, не сомневаюсь.

      Удалить
  4. Очень красиво и необычно!

    ОтветитьУдалить
  5. Ирина, да симпатичненько получается и главное, под любой дизайн подогнать можно.

    ОтветитьУдалить
  6. Привет, Вика. Твой блог - хорошая справочная блогера.😉 Очередной симпатичный момент, бери и пользуйся. Спасибо. 🌷

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Бери и пользуйся. На то они и шпаргалки. Я ведь и сама когда нужно в них заглядываю. Все эти коды и фишки в голове не удержишь. Что - то смастерила, записала, поделилась. И т.д.

      Удалить
  7. Вика, Привет! У меня не получается вставить. Вернее в редактор сообщения вставила, но... кружочки появляются еще и в гаджетах где "книжки на полках".

    ОтветитьУдалить
  8. Ирина, в менюшке тегам li заданы уже стили уже, видимо из-за этого.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML