Многоуровневый нумерованный список

как это выглядит:

1. Создание сайтов
   1. Разработка веб-сайта
   2. Веб-дизайн
   3. Цены на создание сайта
   4. Заказать создание сайта
   5. CMS
      1. Битрикс
   6. Портфолио
      1. Веб-дизайн
      2. Анимация
      3. Баннеры
      4. Дизайн-макеты
2. Веб-мастеру
   1. Справочник HTML
      1. Дескрипторы HTML
         1. Body
         2. Мета-теги
         3. Таблицы
         4. Форматирование текста
         5. Разметка абзацев
         6. Списки (маркеры)
         7. Вставка мультимедиа-файлов
         8. Прочее
      2. Ссылки
      3. Приложения
      4. XHTML
         1. XHTML1.0
         2. Ошибки, встречающиеся, при валидации XHTML
         3. Прочее
   2. Свойства CSS
      1. Фильтры CSS
         1. Прочее
         2. Статичные фильтры для изображений
         3. Статичные фильтры для текста
         4. Фильтры преобразования для изображений
         5. Фильтры преобразования для текста
      2. Формирование фона
      3. Визуальное форматирование
      4. Пользовательский интерфейс
      5. Псевдоэлементы
      6. Свойства шрифтов
      7. Выравнивание текста
      8. Списки (маркеры)
      9. Рамки
      10. Отступы в блоках
      11. Свойства таблиц
      12. Прочее
   3. JavaScript
      1. Формы
         1. Проверочные скрипты
         2. Прочее
      2. Браузеры
         1. Новые окна
         2. Дата, время
         3. Координаты
         4. Скроллинг
         5. Строка состояния, заголовка
         6. Защита страницы
         7. Прочее
      3. Эффекты с текстом
      4. Эффекты с изображениями
      5. Приколы
      6. Справочник по JavaScript
         1. Cобытия браузера
         2. Объект document
         3. Объект window
   4. Справочник PHP
      1. Регулярные выражения
   5. Apache
      1. .htaccess
   6. Статьи о веб-дизайне
      1. Секреты вёрстки
3. Программы
   1. PHP скрипты
      1. CMS - система управления контентом
      2. Форумы, чаты
      3. Медиа
      4. Поиск
      5. Статистика
      6. Рейтинги, каталоги ссылок
      7. Прочее
   2. Офисные программы
      1. Органайзеры
      2. PDF-программы
      3. Переводчики
      4. Прочее
   3. Дизайн
      1. Adobe
      2. 3D
      3. Flash
      4. Gif-анимация
      5. Для работы с иконками
      6. Шрифты
      7. Прочее
   4. Веб-дизайн
      1. Программирование
      2. Раскрутка сайта
   5. Системные утилиты
      1. Украшательства
      2. Пароли
      3. Утилиты
      4. Драйвера
   6. Интернет
      1. Браузеры
      2. Для работы с сетью
      3. Почта
      4. Общение
      5. RSS
      6. TV, радио
   7. Справочники (manual)
      1. Web-Программирование
      2. Интернет
      3. Windows
   8. Media
      1. Проигрыватели
      2. Грабберы
      3. Прочее
   9. Mobile, КПК
      1. Mobile
      2. КПК
   10. Игры
       1. Логические
       2. Симуляторы
   11. Прочее
       1. Программы

пример html-кода:

<style type="text/css">
html>body ol { list-style-type: none; }

ol.double { counter-reset: ol; }
ol.double ol { counter-reset: ol2; }
ol.double ol ol { counter-reset: ol3; }
ol.double ol ol ol { counter-reset: ol4; }
ol.double ol ol ol ol { counter-reset: ol5; }
ol.double ol ol ol ol ol { counter-reset: ol6; }
ol.double ol ol ol ol ol ol { counter-reset: ol7; }
ol.double ol ol ol ol ol ol ol { counter-reset: ol8; }

ol.double li:before
   {
   content: counter(ol) ". ";
   counter-increment: ol;
   }

ol.double ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". ";
   counter-increment: ol2;
   }

ol.double ol ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". " counter(ol3) ". ";
   counter-increment: ol3;
   }

ol.double ol ol ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". " counter(ol3) ". " counter(ol4) ". ";
   counter-increment: ol4;
   }

ol.double ol ol ol ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". " counter(ol3) ". " counter(ol4) ". " counter(ol5) ". ";
   counter-increment: ol5;
   }

ol.double ol ol ol ol ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". " counter(ol3) ". " counter(ol4) ". " counter(ol5) ". " counter(ol6) ". ";
   counter-increment: ol6;
   }

ol.double ol ol ol ol ol ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". " counter(ol3) ". "  counter(ol4) ". " counter(ol5) ". " counter(ol6) ". " counter(ol7) ". ";
   counter-increment: ol7;
   }

ol.double ol ol ol ol ol ol ol li:before
   {
   content: counter(ol) ". " counter(ol2) ". " counter(ol3) ". "  counter(ol4) ". " counter(ol5) ". " counter(ol6) ". " counter(ol7) ". " counter(ol8) ". ";
   counter-increment: ol8;
   }

ul li:before { content: "" !important; }
ol.double ul li { counter-reset: ol1 ol2 ol3 ol4 ol5 ol6 ol7 ol8; }
</style>

<ol class="double">
   <li><a href="http://perkoka.ru/web/" title="Создание сайтов">Создание сайтов</a>
      <ol>
         <li><a href="http://perkoka.ru/web/index.php" title="Разработка веб-сайта">Разработка веб-сайта</a></li>
         <li><a href="http://perkoka.ru/web/web.php" title="Веб-дизайн">Веб-дизайн</a></li>
         <li><a href="http://perkoka.ru/web/price.php" title="Цены на создание сайта">Цены на создание сайта</a></li>
         <li><a href="http://perkoka.ru/web/order.php" title="Заказать создание сайта">Заказать создание сайта</a></li>
         <li><a href="http://perkoka.ru/cms/" class="parent" title="CMS">CMS</a>
            <ol>
               <li><a href="http://perkoka.ru/cms/bitrix/" title="Битрикс">Битрикс</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/portfolio/" class="parent" title="Портфолио">Портфолио</a>
            <ol>
               <li><a href="http://perkoka.ru/portfolio/106.html" title="Веб-дизайн">Веб-дизайн</a></li>
               <li><a href="http://perkoka.ru/portfolio/107.html" title="Анимация">Анимация</a></li>
               <li><a href="http://perkoka.ru/portfolio/109.html" title="Баннеры">Баннеры</a></li>
               <li><a href="http://perkoka.ru/portfolio/108.html" title="Дизайн-макеты">Дизайн-макеты</a></li>
            </ol>
         </li>
      </ol>
   </li>
   <li><a href="http://perkoka.ru/article/" title="Веб-мастеру">Веб-мастеру</a>
      <ol>
         <li><a href="http://perkoka.ru/article/1.html" class="parent" title="Справочник HTML">Справочник HTML</a>
            <ol>
               <li><a href="http://perkoka.ru/article/6.html" class="parent" title="Дескрипторы HTML">Дескрипторы HTML</a>
                  <ol>
                     <li><a href="http://perkoka.ru/article/9.html" title="Body">Body</a></li>
                     <li><a href="http://perkoka.ru/article/10.html" title="Мета-теги">Мета-теги</a></li>
                     <li><a href="http://perkoka.ru/article/11.html" title="Таблицы">Таблицы</a></li>
                     <li><a href="http://perkoka.ru/article/12.html" title="Форматирование текста">Форматирование текста</a></li>
                     <li><a href="http://perkoka.ru/article/13.html" title="Разметка абзацев">Разметка абзацев</a></li>
                     <li><a href="http://perkoka.ru/article/14.html" title="Списки (маркеры)">Списки (маркеры)</a></li>
                     <li><a href="http://perkoka.ru/article/15.html" title="Вставка мультимедиа-файлов">Вставка мультимедиа-файлов</a></li>
                     <li><a href="http://perkoka.ru/article/16.html" title="Прочее">Прочее</a></li>
                  </ol>
               </li>
               <li><a href="http://perkoka.ru/article/7.html" title="Ссылки">Ссылки</a></li>
               <li><a href="http://perkoka.ru/article/8.html" title="Приложения">Приложения</a></li>
               <li><a href="http://perkoka.ru/article/118.html" class="parent" title="XHTML">XHTML</a>
                  <ol>
                     <li><a href="http://perkoka.ru/article/120.html" title="XHTML1.0">XHTML1.0</a></li>
                     <li><a href="http://perkoka.ru/article/121.html" title="Ошибки, встречающиеся, при валидации XHTML">Ошибки, встречающиеся, при валидации XHTML</a></li>
                     <li><a href="http://perkoka.ru/article/119.html" title="Прочее">Прочее</a></li>
                  </ol>
               </li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/article/2.html" class="parent" title="Свойства CSS">Свойства CSS</a>
            <ol>
               <li><a href="http://perkoka.ru/article/17.html" class="parent" title="Фильтры CSS">Фильтры CSS</a>
                  <ol>
                     <li><a href="http://perkoka.ru/article/33.html" title="Прочее">Прочее</a></li>
                     <li><a href="http://perkoka.ru/article/29.html" title="Статичные фильтры для изображений">Статичные фильтры для изображений</a></li>
                     <li><a href="http://perkoka.ru/article/30.html" title="Статичные фильтры для текста">Статичные фильтры для текста</a></li>
                     <li><a href="http://perkoka.ru/article/31.html" title="Фильтры преобразования для изображений">Фильтры преобразования для изображений</a></li>
                     <li><a href="http://perkoka.ru/article/32.html" title="Фильтры преобразования для текста">Фильтры преобразования для текста</a></li>
                  </ol>
               </li>
               <li><a href="http://perkoka.ru/article/18.html" title="Формирование фона">Формирование фона</a></li>
               <li><a href="http://perkoka.ru/article/19.html" title="Визуальное форматирование">Визуальное форматирование</a></li>
               <li><a href="http://perkoka.ru/article/20.html" title="Пользовательский интерфейс">Пользовательский интерфейс</a></li>
               <li><a href="http://perkoka.ru/article/21.html" title="Псевдоэлементы">Псевдоэлементы</a></li>
               <li><a href="http://perkoka.ru/article/22.html" title="Свойства шрифтов">Свойства шрифтов</a></li>
               <li><a href="http://perkoka.ru/article/23.html" title="Выравнивание текста">Выравнивание текста</a></li>
               <li><a href="http://perkoka.ru/article/24.html" title="Списки (маркеры)">Списки (маркеры)</a></li>
               <li><a href="http://perkoka.ru/article/25.html" title="Рамки">Рамки</a></li>
               <li><a href="http://perkoka.ru/article/26.html" title="Отступы в блоках">Отступы в блоках</a></li>
               <li><a href="http://perkoka.ru/article/27.html" title="Свойства таблиц">Свойства таблиц</a></li>
               <li><a href="http://perkoka.ru/article/28.html" title="Прочее">Прочее</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/article/3.html" class="parent" title="JavaScript">JavaScript</a>
            <ol>
               <li><a href="http://perkoka.ru/article/39.html" class="parent" title="Формы">Формы</a>
                  <ol>
                     <li><a href="http://perkoka.ru/article/50.html" title="Проверочные скрипты">Проверочные скрипты</a></li>
                     <li><a href="http://perkoka.ru/article/51.html" title="Прочее">Прочее</a></li>
                  </ol>
               </li>
               <li><a href="http://perkoka.ru/article/38.html" class="parent" title="Браузеры">Браузеры</a>
                  <ol>
                     <li><a href="http://perkoka.ru/article/45.html" title="Новые окна">Новые окна</a></li>
                     <li><a href="http://perkoka.ru/article/42.html" title="Дата, время">Дата, время</a></li>
                     <li><a href="http://perkoka.ru/article/40.html" title="Координаты">Координаты</a></li>
                     <li><a href="http://perkoka.ru/article/44.html" title="Скроллинг">Скроллинг</a></li>
                     <li><a href="http://perkoka.ru/article/43.html" title="Строка состояния, заголовка">Строка состояния, заголовка</a></li>
                     <li><a href="http://perkoka.ru/article/41.html" title="Защита страницы">Защита страницы</a></li>
                     <li><a href="http://perkoka.ru/article/46.html" title="Прочее">Прочее</a></li>
                  </ol>
               </li>
               <li><a href="http://perkoka.ru/article/34.html" title="Эффекты с текстом">Эффекты с текстом</a></li>
               <li><a href="http://perkoka.ru/article/35.html" title="Эффекты с изображениями">Эффекты с изображениями</a></li>
               <li><a href="http://perkoka.ru/article/36.html" title="Приколы">Приколы</a></li>
               <li><a href="http://perkoka.ru/article/37.html" class="parent" title="Справочник по JavaScript">Справочник по JavaScript</a>
                  <ol>
                     <li><a href="http://perkoka.ru/article/47.html" title="Cобытия браузера">Cобытия браузера</a></li>
                     <li><a href="http://perkoka.ru/article/48.html" title="Объект document">Объект document</a></li>
                     <li><a href="http://perkoka.ru/article/49.html" title="Объект window">Объект window</a></li>
                  </ol>
               </li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/article/4.html" class="parent" title="Справочник PHP">Справочник PHP</a>
            <ol>
               <li><a href="http://perkoka.ru/article/52.html" title="Регулярные выражения">Регулярные выражения</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/article/5.html" class="parent" title="Apache">Apache</a>
            <ol>
               <li><a href="http://perkoka.ru/article/53.html" title=".htaccess">.htaccess</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/article/127.html" class="parent" title="Статьи о веб-дизайне">Статьи о веб-дизайне</a>
            <ol>
               <li><a href="http://perkoka.ru/article/128.html" title="Секреты вёрстки">Секреты вёрстки</a></li>
            </ol>
         </li>
      </ol>
   </li>
   <li><a href="http://perkoka.ru/soft/" title="Программы">Программы</a>
      <ol>
         <li><a href="http://perkoka.ru/soft/54.html" class="parent" title="PHP скрипты">PHP скрипты</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/65.html" title="CMS - система управления контентом">CMS - система управления контентом</a></li>
               <li><a href="http://perkoka.ru/soft/70.html" title="Форумы, чаты">Форумы, чаты</a></li>
               <li><a href="http://perkoka.ru/soft/67.html" title="Медиа">Медиа</a></li>
               <li><a href="http://perkoka.ru/soft/69.html" title="Поиск">Поиск</a></li>
               <li><a href="http://perkoka.ru/soft/66.html" title="Статистика">Статистика</a></li>
               <li><a href="http://perkoka.ru/soft/68.html" title="Рейтинги, каталоги ссылок">Рейтинги, каталоги ссылок</a></li>
               <li><a href="http://perkoka.ru/soft/71.html" title="Прочее">Прочее</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/55.html" class="parent" title="Офисные программы">Офисные программы</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/72.html" title="Органайзеры">Органайзеры</a></li>
               <li><a href="http://perkoka.ru/soft/73.html" title="PDF-программы">PDF-программы</a></li>
               <li><a href="http://perkoka.ru/soft/74.html" title="Переводчики">Переводчики</a></li>
               <li><a href="http://perkoka.ru/soft/75.html" title="Прочее">Прочее</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/56.html" class="parent" title="Дизайн">Дизайн</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/76.html" title="Adobe">Adobe</a></li>
               <li><a href="http://perkoka.ru/soft/77.html" title="3D">3D</a></li>
               <li><a href="http://perkoka.ru/soft/78.html" title="Flash">Flash</a></li>
               <li><a href="http://perkoka.ru/soft/79.html" title="Gif-анимация">Gif-анимация</a></li>
               <li><a href="http://perkoka.ru/soft/80.html" title="Для работы с иконками">Для работы с иконками</a></li>
               <li><a href="http://perkoka.ru/soft/81.html" title="Шрифты">Шрифты</a></li>
               <li><a href="http://perkoka.ru/soft/82.html" title="Прочее">Прочее</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/57.html" class="parent" title="Веб-дизайн">Веб-дизайн</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/83.html" title="Программирование">Программирование</a></li>
               <li><a href="http://perkoka.ru/soft/84.html" title="Раскрутка сайта">Раскрутка сайта</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/58.html" class="parent" title="Системные утилиты">Системные утилиты</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/85.html" title="Украшательства">Украшательства</a></li>
               <li><a href="http://perkoka.ru/soft/86.html" title="Пароли">Пароли</a></li>
               <li><a href="http://perkoka.ru/soft/87.html" title="Утилиты">Утилиты</a></li>
               <li><a href="http://perkoka.ru/soft/88.html" title="Драйвера">Драйвера</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/59.html" class="parent" title="Интернет">Интернет</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/89.html" title="Браузеры">Браузеры</a></li>
               <li><a href="http://perkoka.ru/soft/90.html" title="Для работы с сетью">Для работы с сетью</a></li>
               <li><a href="http://perkoka.ru/soft/91.html" title="Почта">Почта</a></li>
               <li><a href="http://perkoka.ru/soft/92.html" title="Общение">Общение</a></li>
               <li><a href="http://perkoka.ru/soft/93.html" title="RSS">RSS</a></li>
               <li><a href="http://perkoka.ru/soft/94.html" title="TV, радио">TV, радио</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/60.html" class="parent" title="Справочники (manual)">Справочники (manual)</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/95.html" title="Web-Программирование">Web-Программирование</a></li>
               <li><a href="http://perkoka.ru/soft/96.html" title="Интернет">Интернет</a></li>
               <li><a href="http://perkoka.ru/soft/97.html" title="Windows">Windows</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/61.html" class="parent" title="Media">Media</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/98.html" title="Проигрыватели">Проигрыватели</a></li>
               <li><a href="http://perkoka.ru/soft/99.html" title="Грабберы">Грабберы</a></li>
               <li><a href="http://perkoka.ru/soft/100.html" title="Прочее">Прочее</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/62.html" class="parent" title="Mobile, КПК">Mobile, КПК</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/101.html" title="Mobile">Mobile</a></li>
               <li><a href="http://perkoka.ru/soft/102.html" title="КПК">КПК</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/63.html" class="parent" title="Игры">Игры</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/103.html" title="Логические">Логические</a></li>
               <li><a href="http://perkoka.ru/soft/104.html" title="Симуляторы">Симуляторы</a></li>
            </ol>
         </li>
         <li><a href="http://perkoka.ru/soft/64.html" class="parent" title="Прочее">Прочее</a>
            <ol>
               <li><a href="http://perkoka.ru/soft/105.html" title="Программы">Программы</a></li>
            </ol>
         </li>
      </ol>
   </li>
</ol>

<script type="text/javascript">
if (!/Opera/.test(navigator.userAgent))
   {
   if (/MSIE 5.0/.test(navigator.userAgent)) var undefined = '';
   printLi();
   }

function printLi()
   {
   var OLs = document.getElementsByTagName("OL");
   for (var j=0; j<OLs.length; j++)
      {
      LetsDoIt(OLs[j]);
      }

   ULs = document.getElementsByTagName("UL");
   for (j=0; j<ULs.length; j++)
      {
      ULs[j].innerHTML = ULs[j].innerHTML.replace(/<li>((\d+\. )*)/gi, "<li>");
      }
   }

function LetsDoIt(element)
   {
   element.style.listStyleType = 'none';
   oM = element.childNodes.length;
   var k = 0;
   for (i=0; i<oM; i++)
      {
      oLI = element.childNodes[i];
      if (oLI.innerHTML != undefined && !/<li>/.test(oLI.innerHTML))
         {
         k++;
         oLI.innerHTML = k + '. ' + oLI.innerHTML;
         if (navigator.appName != "Netscape") oLI.innerHTML = oLI.innerHTML.replace(/((\d+\. )(\d+\. )*)/, "$1$2");
         oLI.innerHTML = oLI.innerHTML.replace(/\d+\. /, '');
         }
      if (oLI.innerHTML != undefined)
         {
         if (navigator.appName != "Netscape") oLI.innerHTML = oLI.innerHTML.replace(/<li>((\d+\. )*)/gi, "<li>$1" + k + '. ');
         }
      }
   }
</script>

см. также: Свойство content

• 85
• 1
• 2
• 3
• 4
• 5

13.11.07 просмотров: 3404