Упорядоченный список

По умолчанию, браузеры выводят упорядоченный список (тег <ol>) тем же шрифтом, что и тело списка.

Пример стандартного упорядоченного списка

  1. Рыжик
  2. Барсик
  3. Мурзик

Код для примера


<ol>
<li>Рыжик</li>
<li>Барсик</li>
<li>Мурзик</li>
</ol>

Если вам хотите сделать упорядоченный список, более соответствующим дизайну на вашей странице, то воспользуйтесь небольшой хитростью.

Создайте упорядоченный список. Текст, который используется в списке вложите в параграф <p>.

Пример стандартного упорядоченного списка с применением параграфа

  1. Рыжик

  2. Барсик

  3. Мурзик

Код для примера


<ol>
  <li>
    <p>Рыжик</p>
  </li>
  <li>
    <p>Барсик</p>
  </li>
  <li>
    <p>Мурзик</p>
  </li>
</ol>

Далее подключаем стили CSS для тегов ol и p:


.newlist ol {
  font: italic 1em Georgia, Times, serif; color: #999999;
}
ol p {
  font: normal .8em Arial, Helvetica, sans-serif; color: #000000;
}

Теперь список будет выглядеть так:

  1. Рыжик

  2. Барсик

  3. Мурзик

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

Реклама