Реферат: CSS Design: Укрощение списков
Item 1,
Item 2,
Item 3,
Item 4,
Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку.
And then there is the text that follows the list in the paragraph. Oneortwosentencesissufficientfortheexample.
Как и в примере выше с маркером мы можем с помощью CSS автоматически генерировать запятые и точки. Если ваши посетители пользуются только броузерами Opera и Gecko, вам не о чем беспокоиться. Стилевые правила будут выглядеть вот так:
#inline-list-genulli:after {
content: ", ";
}
#inline-list-gen ul li.last:after {
content: ". ";
}
Здесь мы используем псевдо-элемент :after для добавления запятой в конце каждого пункта списка, а точку ставим с помощью класса class="last". Результат будет таким (помните, он работает только в Opera или Mozilla/Netscape):
A bit of text before the list appears. Perhaps the context is something about a husband getting a call from his wife to pick up a few things on the way home from work. It doesn’t really matter, for our purposes we just need some preceding text before the list:
Item 1
Item 2
Item 3
Item 4
Item 5 сделаем этот пункт немного длиннее, чтобы он переходил на следующую строку
And then there is the text that follows the list in the paragraph. Oneortwosentencesissufficientfortheexample.
Навигация
Как я уже сказал в самом начале меню ссылок, которые мы видим на каждом сайте, должны быть оформлены как списки, чем они по сути и являются. Так как мы не хотим видеть этот список так, как его выводит броузер по умолчанию, воспользуемся CSS для внесения косметических изменений. Мы уже знаем, что списки можно специально выводить горизонтально (в одну строчку), а не только вертикально (как они выводятся по умолчанию). С помощью стилей маркеры можно убрать, а в ваших руках появляется широкий набор возможностей, как визуально отделить один пункт списка от другого.
Вот примеры горизонтальных списков, помещенных в один и тот же базовый DIV со следующими правилами.
#h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}
Два примера ниже используют все тот же UL только без длинного текста в последнем пункте. Добавлен также дополнительный класс, который позволяет отдельно работать с одним из LI в списке.