Автор: Крис Койер
Перевод: Всеволод Козлов
То, что будет продемонстрировано в этой статье, несемантично и не призвано заменить обычные нумерованные списки. Здесь просто показан вариант красивого и необычного их оформления.
Надеюсь, что Вам понравится и Вы найдете этому применение в своей практике!
Фрагмент 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;
}
#description-area {
padding: 20px;
}
.comment-box {
margin: 0px 0px 50px 50px;
padding: 20px;
width: 240px;
border: 1px solid black;
float: left;
}
Оригинал статьи: Better Ordered Lists (Using Simple PHP and CSS)
Смотрите также:
- Текстуры
- Jquery всплывающие подсказки
- Jquery плагины
- Шаблоны сайтов css
- Оформление таблиц css
- Очень красивые шрифты
- Иконки для рабочего стола
- Бесплатные шаблоны сайтов HTML css
- Ajax формы
- Css формы
6 комментария(-ев)
<?php for ($i = 1; ; $i++) {
if ($i > 9) {
break;
} ?>
Wtf ?
<?php for ($i = 1; $i <= 9 ; $i++) { ?<
Спасибо. Думаю попробовать.
Спасибо! Очень помогло
Друзья, а зачем в CSS указаны стили:
#description-area и #page-wrap
Из примера не увидел, где они используются
Хы, вот пошаговые инструкции удобно оформлять будет
Прикольно.
Вот это циферки! Теперь в элементах нумерованного списка точно не запутаешься.