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

Задача для олимпиады по интернет-технологиям про оформление нумерованного списка
Сложность — высокая

Дан HTML код:

<ol class="poly">
<li>если вы готовы ставить большие цели</li>
<li>хотите реализовывать свой потенциал по максимуму</li>
<li>открыты для новых идей</li>
<li>мечтаете вносить ощутимый вклад в мир</li>
<li>стремитесь создать из своих страстей блестящую жизнь</li>
<li>намерены быть лидером, и сбалансировать работу, семью и отдых</li>
<li>желаете испытывать глубокое чувство счастья и удовлетворения</li>
</ol>

Задача:
Написать стили CSS, которые зададут следующее отображение нумерованного списка
screen2015-11-02-3

Решение:
[vk_lock]
ol.poly {font-family:tahoma;
font-size:24px;
color:#ccc;
margin: 10px 0 0 40px;
counter-reset:li; /* Инициализируем счетчик */
padding:0; /* Удаляем  установленное по умолчанию левое поле*/
list-style:none; /* Отменяем нумерацию установленную по умолчанию */}

ol.poly li {
position:relative; /* Создаем контекст для позиционирования элементов */
padding:4px 8px;
line-height: 40px;
font-style:normal;
font-family:tahoma;
font-size:18px;
font-weight: bold;
color:#3d3d3d;  }

ol.poly li:before {
content:counter(li); /* В качестве данных используем счетчик */
counter-increment:li; /* Увеличиваем значение счетчика на 1 */
/* Позиционируем и оформляем цифры */
position:absolute;
top:-2px;
left:-2em;
width:2em;
padding:4px 0;
color:#fff;
background:url(images/spoly.png) no-repeat;
background-position:2px 8px;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}

[/vk_lock]


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

Ваш адрес email не будет опубликован. Обязательные поля помечены *