Нумерация нескольких блоков цитат

 Обычно нумерацию используют в каких - нибудь списках. Попробуем сделать нумерацию к нескольким блокам с цитатами. Элемент blockquote это своеобразный раздел (блок), который цитируется из другого источника. Поэтому теги  blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Кстати, разработчики нам предоставили функцию добавления оформления цитат - в редакторе функция дополнительно и кавычки. Но весьма скучноватые.

У меня было уже несколько статей как красиво, с помощью стилей, можно оформить цитаты в тексте. 

А вот так может выглядеть целый раздел с нумерованными цитатами, мудрыми мыслями, отрывками из книг, да мало ли чего ещё.

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

<div class="post-body">

<blockquote class="kata-kata">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ex lacus, viverra sed tortor sit amet, porta pharetra mauris. Duis malesuada nec nunc eu vestibulum. Etiam non tempor libero. Quisque suscipit nibh nec mauris varius bibendum. Donec id commodo orci. In vel venenatis metus, quis eleifend felis. Ut mollis faucibus purus eleifend tempus. Nullam aliquam aliquet libero, eget porttitor ligula malesuada vel. 

</blockquote>

<br />

<blockquote class="kata-kata">

Nullam tempor purus quis ex aliquam tincidunt. Maecenas mauris justo, tincidunt ac felis sit amet, lobortis pellentesque purus. Sed accumsan consectetur tempus. Sed mollis nisi lacus, at convallis orci malesuada in. Quisque pulvinar mauris id mauris posuere, vel sollicitudin arcu elementum. Suspendisse sit amet mollis nisi. 

</blockquote>

<br />

<blockquote class="kata-kata">

Suspendisse ut sollicitudin risus. Donec aliquam velit mauris, maximus cursus tortor ornare eu. Nunc nibh magna, ultricies a maximus quis, dictum non nunc. Maecenas venenatis pellentesque augue, sed lacinia eros. Sed ut nibh eget magna aliquet sodales. Nullam varius sagittis tortor eu laoreet. In efficitur mi eget mi mollis vehicula. Vivamus suscipit consequat diam, at pharetra neque hendrerit vel. Mauris non erat sit amet lectus accumsan consectetur. 

</blockquote>

<br />

<blockquote class="kata-kata">

Nam rutrum orci eu diam sodales aliquam. Mauris fringilla suscipit nisl tempor cursus. Morbi metus metus, malesuada eget accumsan et, consectetur vel nibh. Nulla facilisi. Vivamus consequat, enim at posuere molestie, dolor augue suscipit lorem, nec finibus tellus turpis in velit. Phasellus quis gravida massa. 

</blockquote>

<br />

<blockquote class="kata-kata">

Proin tempor sapien justo, in pretium diam facilisis a. In hendrerit vitae nisl at venenatis. Maecenas in faucibus purus. In eu sem tempus quam bibendum scelerisque. Nulla convallis tempus tortor, ut convallis libero auctor vitae. 

</blockquote>

<br />

<blockquote class="kata-kata">

Maecenas gravida eros sed lorem porta hendrerit. In hac habitasse platea dictumst. Nam sed auctor quam. Morbi pharetra rhoncus porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt dictum nisl sit amet sagittis. Nam feugiat quis tortor ac mattis. Integer gravida sed nunc ut varius. Pellentesque sit amet hendrerit nisl. Ut in tincidunt urna. In mattis neque nibh, vel aliquam justo porttitor ac.

</blockquote>

<br />

<blockquote class="kata-kata">

Donec varius euismod enim ut ultrices. Maecenas suscipit dignissim lorem quis malesuada. Fusce quis condimentum mauris. Vestibulum felis velit, ultrices id blandit ac, cursus et nisi. Quisque ut ante ac urna convallis vehicula tempus ut nibh. Nam et euismod est, a tincidunt elit. Nunc pellentesque sit amet quam ullamcorper lobortis. Aliquam cursus aliquet ornare. Morbi feugiat elementum lorem. Donec id volutpat magna. Donec facilisis dolor id libero mollis, ut pretium nisl ultricies. Donec at diam nec erat interdum suscipit et rhoncus ante. Suspendisse ac commodo erat.

</blockquote>

<br />

<blockquote class="kata-kata">

Pellentesque sed diam ipsum. Proin sollicitudin nisl eget est ornare dictum. Sed consequat lacus tortor, eget scelerisque odio luctus a. Duis sed elit eget metus euismod mollis. Vestibulum non tortor at arcu dictum luctus eu id justo. Vestibulum ac sem lorem. Ut rutrum nunc dolor, quis consequat odio porta at. Vestibulum pharetra rhoncus urna, a commodo velit feugiat id.

</blockquote>

<br />

<blockquote class="kata-kata">

Fusce maximus semper vestibulum. Nullam porttitor urna nunc, vel laoreet arcu volutpat convallis. Curabitur a gravida risus. Quisque faucibus blandit fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent odio ligula, varius ultricies tortor et, egestas laoreet purus. 

</blockquote>

<br />

<blockquote class="kata-kata">

Sed ullamcorper risus eu quam suscipit aliquam. Vivamus maximus est sed ipsum vulputate euismod. Curabitur placerat ullamcorper fermentum. Proin condimentum dui dolor, auctor dapibus nisl cursus at. Nulla a egestas nibh. Nulla at orci maximus, vehicula nibh at, rutrum lacus. Sed tincidunt ante vitae dictum condimentum. Pellentesque laoreet odio eu mi varius lobortis. Quisque feugiat vulputate nibh, in pulvinar urna ullamcorper eu. Vivamus rhoncus congue ex, id suscipit ligula placerat id. Nullam ultricies justo arcu, et imperdiet nisi congue scelerisque.

</blockquote>

<br />

<blockquote class="kata-kata">

Nunc accumsan et lectus nec tincidunt. In non justo et est blandit ultricies a quis eros. Phasellus ut pharetra dui, quis bibendum risus. Vestibulum eu tristique nibh. Sed ultrices gravida finibus. Suspendisse in orci vitae elit auctor hendrerit. Nullam eleifend lorem a est dictum, ut interdum nisl euismod. Pellentesque tincidunt id purus blandit rutrum. 

</blockquote>

<br />

<blockquote class="kata-kata">

Integer at sapien ac lectus sagittis rhoncus ut nec mi. Pellentesque id aliquam erat, et pharetra nisl. Nam at sapien id tellus pellentesque congue non eu ipsum. Proin at diam arcu. Vestibulum mi massa, fermentum ac dui ut, hendrerit egestas arcu. Maecenas erat sem, viverra non congue eget, auctor eget velit. Sed a pellentesque velit.

</blockquote>

<br />

<blockquote class="kata-kata">

Nunc maximus, elit et lobortis congue, dui orci imperdiet tortor, in tempus tellus arcu sit amet orci. Mauris nulla justo, convallis quis magna eu, ullamcorper rhoncus mauris. Sed sed pretium lacus, id mollis neque. Ut quis nisi tempor, ultricies arcu non, condimentum metus. Mauris malesuada odio a massa ullamcorper, id placerat libero porta. Pellentesque congue eros et turpis maximus, a porta nunc lacinia. Praesent imperdiet leo eu tempus eleifend. Ut viverra mauris nisi, ut maximus nisi varius eu. Donec id consequat ante. Nulla tincidunt tincidunt nibh at sodales. Nunc fermentum enim lectus, id sodales nunc malesuada a. Nullam leo ligula, imperdiet ac auctor vitae, egestas ut metus. Aenean pulvinar ullamcorper lectus non hendrerit. Nam posuere pharetra nunc, mollis elementum nulla hendrerit eget.

</blockquote>

<br />

<blockquote class="kata-kata">

Sed quam lectus, convallis porta dapibus et, lacinia elementum arcu. Suspendisse potenti. Nunc euismod eros vitae metus tincidunt, ac semper diam blandit. Ut sodales est non ligula cursus, in facilisis dolor posuere. Mauris commodo, quam vitae gravida maximus, neque lectus laoreet urna, nec auctor quam urna tincidunt ex. Nullam rhoncus augue sit amet velit mattis, ac venenatis nunc tincidunt. Phasellus cursus metus enim, eu ultrices metus viverra sit amet. Praesent congue turpis eget nisi condimentum, non venenatis est fringilla. Vivamus fringilla, nibh a imperdiet iaculis, urna purus condimentum elit, id dapibus est tortor sed ligula. Nulla nec mauris commodo sapien ullamcorper gravida et in elit.

</blockquote>

<br />

<blockquote class="kata-kata">

Suspendisse id ultrices justo, in eleifend orci. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Quisque neque sapien, faucibus et sodales quis, efficitur quis urna. Nullam vitae turpis quis arcu laoreet dictum. Donec dapibus molestie malesuada. Praesent odio tortor, convallis sed libero vitae, vehicula sagittis tortor. Nulla cursus ligula sit amet dictum placerat. Aliquam eleifend vulputate arcu eget gravida. Nulla facilisi. Sed metus leo, efficitur et pellentesque et, feugiat in sapien. Donec dignissim est sit amet posuere pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</blockquote>

<br />

<blockquote class="kata-kata">

Nullam nec mollis eros, sed ullamcorper ligula. Nunc pharetra, metus vitae imperdiet cursus, mauris quam consequat justo, et fermentum augue urna non nisi. Vivamus sagittis faucibus varius. Nullam finibus velit ut ultricies interdum. Maecenas orci ex, lacinia ut dui id, rhoncus efficitur nisi. Nunc maximus ornare diam vitae vehicula. Phasellus tempus odio imperdiet lectus luctus, sit amet sagittis lectus malesuada. Donec vitae enim non massa rutrum eleifend. Sed vitae fringilla sem. Curabitur viverra euismod laoreet. Vestibulum sed tortor arcu. Donec porta, mi fermentum rhoncus blandit, enim orci vehicula ligula, faucibus dapibus lectus elit id augue. Nulla eu orci sed leo mollis consequat. Phasellus vulputate aliquam metus, non aliquet dolor accumsan at.

</blockquote>

<br />

<blockquote class="kata-kata">

Vivamus purus augue, ultricies sit amet nibh eget, egestas fringilla tellus. Integer mattis metus sed odio consequat convallis. Etiam aliquet rutrum est porta tempor. Fusce dui augue, aliquam eu semper ac, molestie sed ipsum. Nunc vitae sapien vitae purus vestibulum blandit nec eu massa. Praesent pretium feugiat ligula, at feugiat sapien consequat non. Nullam ultrices sollicitudin felis, vel vulputate neque. Etiam vitae dapibus ipsum. Suspendisse maximus vitae dui in condimentum. Maecenas accumsan lobortis condimentum. Nullam blandit, quam sed elementum posuere, lorem lectus viverra arcu, a lobortis ante nisi in lorem.

</blockquote>

<br />

<blockquote class="kata-kata">

Aenean ut dui elit. Sed malesuada, ex ut fringilla scelerisque, turpis lorem sollicitudin leo, nec molestie massa arcu ut mauris. Vivamus accumsan diam ligula, sed malesuada felis faucibus et. Quisque semper, eros imperdiet suscipit facilisis, nibh ex dignissim neque, sed pulvinar ex ante non magna. Nam malesuada, ligula in tristique dignissim, est ligula consequat sem, mollis gravida sapien turpis quis sem. Pellentesque a dui pellentesque, vulputate quam a, dapibus ex. Aenean mollis, orci varius imperdiet scelerisque, risus mauris sagittis ligula, vitae consectetur orci risus quis lorem. Vivamus convallis sagittis dui ac pretium. Sed erat nunc, venenatis et condimentum vel, tristique sit amet tortor. Pellentesque placerat dui at cursus feugiat. Aenean sodales lorem lacus, ut cursus ante molestie quis. Duis blandit sollicitudin pretium. Nunc et sagittis nulla. Donec eu ante at nisi varius ultricies. Integer cursus in metus eu blandit. Maecenas quis dapibus ex.

</blockquote>

<br />

<blockquote class="kata-kata">

Etiam ut condimentum sem, ut fermentum urna. Aliquam nec metus tellus. Nunc egestas, lectus eu hendrerit ultrices, orci mi tincidunt velit, in ullamcorper lacus tellus eget urna. Quisque ac mattis nisl. Cras bibendum, lectus at commodo elementum, ipsum orci egestas dolor, eget vestibulum metus nibh eu eros. Aliquam varius tristique varius. Mauris vitae vulputate eros. Maecenas gravida tristique augue, at tristique risus sodales at. Quisque tincidunt sapien non maximus congue. Aenean semper libero vitae augue dignissim tempus. Cras a finibus lorem. Morbi hendrerit imperdiet diam non tristique. Morbi fermentum nisl sit amet nunc tincidunt, sit amet ultrices orci sagittis. Praesent at eleifend urna, a convallis ex. Nam elementum velit et sapien egestas, sed feugiat metus ornare.

</blockquote>

<br /></div> <style>.post-body {counter-reset:blockquote;}

.post-body blockquote.kata-kata{font-size:18px;font-family:Georgia;color:#000;border-left:3px solid #FF1744;padding:10px 10px 10px 40px;margin:0;background:#efefef;counter-increment:blockquote;position:relative;}

.post-body blockquote.kata-kata:before{content:counter(blockquote)'.';position:absolute;left:0;top:0;color:#000;font-size:18px;font-weight:700;z-index:2;width:40px;height:40px;line-height:40px;text-align:center;}</style>

В стилях CSS (отметила участок кода) можно изменить буквально всё, в зависимости от вашего желания и дизайна блога. Кто затрудняется пока, обращайтесь в комментариях. 

По необходимости можно добавлять или убирать такие участки в коде

<blockquote class="kata-kata">здесь какая - то цитата или участок цитируемого текста
</blockquote>
<br />

Готовый код устанавливается в редакторе сообщений  в формате HTML в нужном месте. 

Вот такое оригинальное оформление цитат имеем.

Всем, добра и до встречи.

P.S. сегодня Гугл с рекламными блоками играется, надеюсь на ваше понимание. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email