Контроль вывода элементов нумерованных и ненумерованных списков

  • Главная»
  • Уроки»
  • CSS»
  • Контроль вывода элементов нумерованных и ненумерованных списков

Если вы заботитесь о написании правильного HTML кода, то задача определения порядка вывода элементов списков может показаться ерундовой. Однако и тут могут быть нюансы, а решение может быть в использовании HTML + CSS. Многие разработчики теряют надежду найти решение и используют метод, доступный по умолчанию. На самом деле, ответ не сложен, особенно если использовать HTML5.

Вывод нумерованного списка с определённого числа

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

<h2>My Top Five Movies</h2>
<ol>
<li>Star Wars
<li>The Matrix
<li>Mr. & Mrs. Smith
<li>Wanted
</ol>
<p>Yes, I know those are Angelina Jolie movies. What can I say? I’m a fan.
<ol>
<li>Rashomon
</ol>

По умолчанию, новый список начнётся с 1. Для того чтобы начать новый список с определённого числа, воспользуйтесь атрибутом start:

<ol start=5>
<li>Rashomon
</ol>

Результат будет примерно такой:

Вывод в обратном порядке

Если вы хотите вывести элементы списка в обратном порядке, то воспользуйтесь атрибутом reversed:

<h3>Countdown Sequence Start</h3>
<ol reversed>
<li>Ignition
<li>Engine start
<li>Liftoff
</ol>

Результат:

Самое сложное в нумерованных списках - это правильная нумерация в нужном нам виде: к примеру, 5.1 или 3.7; Для контроля отображения порядка чисел в CSS можно воспользоваться специальными счётчиками:

К примеру, вы хотите ряд списков, которые будут начинаться подобно числу 1.1. Сначала, нам нужно написать правильный HTML:

<h2>Legalese</h2>
<ol>
    <li>Flibbert
    <ol>
        <li>Flibberme
        <li>Giblet
    </ol>
    <li>Me Giblets
    <ol>
    <li>Beep
    <li>Bop
    <li>Boop
    </ol>
</ol>

Счётчик увеличивается, когда встречает нужный элемент.

Для начала, уберём стандартное отображение номеров списков:

ol { list-style-type: none; }

Затем, указываем счётчику сбиваться и переходить на следующий номер при каждом новом элементе ol:

ol { counter-reset: section; }

При встрече каждого элемента li, увеличиваем счётчик подсписка на 1:

li { counter-increment: section; }

Перед каждым (не декорированным) элементом списка, вывести контент, включая текущий посчитанный номер:

li { content: counters(section, ".") " "; }

Результат:


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/TGnEjO2J5co/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Контроль вывода элементов нумерованных и ненумерованных списков | | 2013-06-02 00:21:05 | | Статьи Web-мастеру | | Главная» Уроки» CSS» Контроль вывода элементов нумерованных и ненумерованных списков Если вы заботитесь о написании правильного HTML кода, то задача определения порядка вывода элементов списков может | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: