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

Если создать цикл, или если цикл уже выполняется, например, как в комментариях WordPress, появляется возможность для создания интересных нумерованных списков. Просто задайте целочисленную переменную в PHP, которая будет увеличиваться на один, пока цикл выполняется. После этого выведите переменную там, где Вам нужно, и задайте ей стили с помощью CSS.

В этом примере использован элемент h2 с огромным размером шрифта, серым цветом, всплытием влево и небольшим правым внешним отступом. Этот способ изящный и устойчивый, так как в нем не используются графические элементы для цифр:

Вот пример простого цикла PHP:

<?php for ($i = 1; ; $i++) {

   if ($i > 9) {
      break;
   }  ?>

   <div class="comment-box">
      <h2 class="number"><?php echo $i ?></h2>
      <p>Здесь находится текст.</p>
   </div>
<?php } ?>

Нужный код CSS:

h2.number {
        position: relative;
        top: 0px;
        left: 0px;
        font-size: 10em;
        color: #ccc;
        float: left;
        margin-right: 10px
}

#page-wrap {
        width: 760px;
        background: white;
        margin: 0 auto;
        padding: 10px 0px 50px 0px;
        background: white url(images/gradient2-bg.gif) bottom repeat-x;
}

#description-area {
        padding: 20px;
}
.comment-box {
        margin: 0px 0px 50px 50px;
        padding: 20px;
        width: 240px;
        border: 1px solid black;
        float: left;
}

Демонстрация работы

Скачать исходный код

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание маркировки для списков с использованием изображений
• Создание оформленных нумерованных списков с использованием CSS
• Создание заголовков с линиями по краям