Еще одним эффектным способом визуального оформления списков является возможность использования графического маркера элемента списка. То есть, вместо использования нескольких скучных стандартных маркеров, вы сможете использовать собственноручно созданное изображение.
Изображение должно быть создано в формате *.jpg, *.gif. Предположим, что вы хотите использовать в качестве маркера изображение "marker.gif", размерами 10х16 пикселей, расположенное в той же папке, что и HTML страница. Код для достижения поставленной цели будет иметь следующий вид:
| Использование графического маркера
| |
| <ul style="list-style-image: url(marker.gif);"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> <li>Элемент списка 4</li> <li>Элемент списка 5</li></ul> |
Если в стиле для списка одновременно указать и стандартный тип маркера и графический маркер, то сработает только графический, так как он имеет больший приоритет.
Совет:При назначении графического маркера, установите, так же, стандартный маркер. Тогда, в случае отсутствия изображения маркера, форматирование списка будет производиться стандартным маркером.
Для отмены графического маркера используйте свойство list-style-image со значением none:
| ...<li style="list-style-image: none;"> ... |
