Нашёл случайно одну любопытную вещь, возможно кому нибудь пригодится.
Нумерованный список наоборот (в обратном порядке), то есть высшие числа не внизу, а вверху (в порядке убывания), вдобавок рассмотрим различные настройки такого списка.
Пример с помощью Jquery:
← Самые популярные дистрибутивы Linux/Результаты опроса
- Slackware - 4,5%
- Gentoo - 5,5%
- Fedora - 10%
- Debian - 25%
- Ubuntu - 55%
И с разным оформлением (+css):
- Slackware - 4,5%
- Gentoo - 5,5%
- Fedora - 10%
- Debian - 25%
- Ubuntu - 55%
Выглядит это так (коды второго демо):
Основной html блок списка:
<ol class="reversed" id="reversedcss"> <li>Slackware - 4,5%</li> <li>Gentoo - 5,5%</li> <li>Fedora - 10%</li> <li>Debian - 25%</li> <li>Ubuntu - 55%</li> </ol>
reversed обращается к скрипту (см. следующий код)
reversedcss обращается к стилям (см. третий код)
Скрипт jQuery:
<script> $(document).ready(function() { $('.reversed').each(function() { var $children = $(this).children('li'); var totalChildren = $children.length; var start = 0; $children.each(function() { $(this).val(totalChildren - start); start++; }); }); }); </script>
И стиль css для наведения красоты и подмены символов в нумерованном списке:
<style> ol {padding-left: 60px;} #reversedcss {list-style-type:upper-roman;} #reversedcss:hover {list-style-type:upper-roman; color:gray; font-size:18px;} </style>Для ol прописан небольшой отступ вправо.
В reversedcss прописан list-style-type, который задаёт следующие маркеры:
upper-roman - большие римские цифры (как в демо)
lower-roman - малые риские цифры
decimal - значение по умолчанию, арабские цифры
upper-alpha - вместо цифр заглавные A, B, C
lower-alpha - вместо цифр строчные a, b, c
Увеличение (reversedcss:hover) я добавил просто для наглядности.
Автор скрипта - Trevor Davis
Подробности использования тегов ol и ul в этой заметке.
Комментариев нет:
Отправить комментарий