Избор на стандартните маркери в списъците обикновено са ниски, особено ако говорим за неподредените списъци. Какво става, ако задачата е да се създават и използват свои собствени маркери, текст или изображение? Този проблем е напълно решен ....
Вярно резервация наведнъж, че първо ще обсъдим по-теоретични основи, тъй като там е браузър nazvanIEkotorogo знае всичко. Нормалната Решението е базирано на използването на автоматично генерирано съдържание, както и по-горе браузър (бъда честен докрай - не само той) не поддържа тази функция. Но тя работи добре в Mozilla, Firefox, Netscape 6+, Opera и Safari. И след това се анализира и универсално решение. За съжаление не е толкова елегантна.
Погледнете в CSS-код:
За да започнете скрий списък знак, който е по подразбиране с помощта на списък стил: няма; След това ние си поставихме за ляв отстъп 1em, но смяна на текста вляво от една и съща сума, т.е. -1em да "остави" стандартен маркер на елемента в списъка кутия. С помощта на: преди да се генерира текст маркер. Желаните герои съдържание на имотите ще се използва първия шестнадесетичен Unicode бягство еквивалент, както се изисква от спецификацията на CSS2.1. В примера генерира последователност от символи от двойна стрелка коледна дървета и пространство. Елегантен, опростен и красив, но не и IE ...
... и решение, което е подходящо за всички браузъри. За съжаление, вече не е толкова красива. Текст маркери просто са поставени пред всеки елемент от списъка. Както е показано по-долу:
стил лист за тази опция, трябва да бъде малко промяна. Ето как:
Въпреки това, в този метод, има недостатък, макар и не много критичен. Ако браузърът на потребителя не поддържа CSS, ще видите два маркера за всеки елемент от списъка - белег, генерирани от браузъра и маркер, че сме добавили ръчно.
Нека разгледаме още един въпрос: как да се направи маркер, като се използва по-голям?
За да кандидатствате графична употреба маркер собственост списък стил-изображение. както е показано в примера по-долу
Имоти списък стил тип се използва тук, само в случай, ако браузъра на потребителя, не е в състояние да използва изображението. И в имота списък стил образ се определя от пътя към желаното изображение. Контролирайте размера на изображението, което се използва като маркер на списъка с CSS маси, ние не можем, и затова е необходимо да се уверите, че изображението има подходящи размери. Друга подробност е, че стойностите на графични маркери са наследени, а ако създадете вложени списъци и искат да се откажат от образа на маркера в тях, е необходимо да се използва свойството на списък стил образ отново. Ето как:
И ако искате да имате доста голяма картина, този метод не е подходящ като списък маркер, като част от изображението може да бъде просто "отрязани". За да се избегне това ограничение, което трябва да се направи малко по-различно:
Първо заданието за лявото поле и списъка лявата граница (защо е така, аз обясних в предишна статия). След това махнете маркера използва по подразбиране. Сега най-важното: подложка: 0.5em 0 0.5em 54px; - правим място в ляво на елемент от списъка, за да се сложи в нашия голяма картина (напр 54h54 пиксела), и след това определете шрифта собственост, така че текстът на точка от списък не е в дисонанс с размера на изображението на маркера, и най-накрая се използват на фона на собственост. да вмъкнете картинка като маркер на списък.