|
Базовые маркеры и числаФундаментальным вопросом рассмотрения при создании оформления списка является форма маркера или способ нумерации, который желательно использовать. Можно также вообще не использовать маркеры и числа. Как было показано в статье 16 о списках HTML, существует множество различных возможностей, задаваемых с помощью свойства list-style-type. Например, чтобы задать для всех неупорядоченных списков на сайте квадратные маркеры, используйте следующий код CSS: ul li { list-style-type: square;}который создает что-то подобное изображенному на рис. 32.1: Несколько распространенных типов списков показаны на рис. 32.2: Существуют также и другие менее распространенные возможности. Отметим, что маркеры и цифры будут изображаться цветом, который задается или наследуется элементом li. Если требуется, чтобы маркер имел цвет отличный от текста, нужно использовать изображение, или решить проблему с помощью других элементов в пунктах списка (это можно легко сделать, например, когда все пункты являются ссылками). Специальные маркеры, использующие изображения Стандартного множества маркеров достаточно для базового контента, однако широко распространено требование замены их специальным изображением. Спецификация CSS содержит свойство list-style-image для добавления специального изображения списка. Однако это свойство имеет ограниченные возможности позиционирования для фонового изображения, и в некоторых ситуациях вообще не работает в браузере IE. Поэтому значительно более распространенной практикой является просто задание фонового изображения в пунктах списка.Представим, что имеется список лент RSS и необходимо изменить маркер на стандартную оранжевую иконку RSS. Мы задаем для списка класс "rss", чтобы выделить его из других списков: <ul class="rss"> <li><a href="http://example.com/rss.xml">News</a></li> <li><a href="http://example.com/rss.xml">Sport</a></li> <li><a href="http://example.com/rss.xml">Weather</a></li> <li><a href="http://example.com/rss.xml">Business</a></li> <li><a href="http://example.com/rss.xml">Entertainment</a></li> <li><a href="http://example.com/rss.xml">Funny News</a></li></ul>Прежде всего, определяем для списка отсутствие list-style-type и удаляем поле и заполнение. Затем мы добавляем просто фоновое изображение для каждого пункта списка, некоторое заполнение слева, чтобы сместить текст, позволяя вывести изображение, и некоторое заполнение снизу, чтобы растянуть пространство между пунктами списка: .rss { margin: 0; padding: 0; list-style-type: none;}.rss li { background: #fff url("icon-rssfeed.gif") 0 3px no-repeat; padding: 0 0 5px 15px;}Это создает список с изображением RSS вместо маркеров, как показано на рис. 32.3: Отметим, что фоновое изображение позиционируется для точного размещения с помощью пикселей. В зависимости от создаваемого дизайна, можно использовать также %, em или ключевые слова.Будьте внимательны при проектировании свойств контента, которые могут создавать многострочные пункты списков - если задать для фонового изображения вертикальное центрирование или 50%, то это может выглядеть достаточно странно, как показано на рис. 32.4: Задавая размещение изображения вверху пункта списка, мы сохраняем используемое по умолчанию поведение маркеров (когда маркер размещается в первой строке) - см. рис. 32.5: Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор... ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала... Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычислить, когда этот... Что способствует осуществлению желаний? Стопроцентная, непоколебимая уверенность в своем... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|