Создание любых маркеров у списка с помощью CSS
Задача. Необходимо сделать маркированный список, где в качестве маркера может использоваться любое изображение. Для таких целей придумано свойство list-style-image. Но при его использовании картинка распологается в разных браузерах не предсказуемо по-разному. Покажем как можно одинаково во всех браузерах отобразить маркер-картинку у списка.
Идея метода состоит в том, что мы вообще убираем стиль маркеров у списков, а нужные нам маркеры-картинки ставим через background каждому элементу списка li, и ставим соответствующие отступы у фона и элементов списка.
Итак, пусть, например, нам нужно в качестве маркера списка сделать длинное тире. Нарисуем картинку длинного тире:

Следующий код реализует нашу задумку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Создание маркированного списка</title> <style type="text/css"> body { margin:0; padding:40px; font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; } p { padding:0 0 20px 0; margin:0; } ul { list-style:none; padding:0 0 20px 0; margin:0; } ul li { padding:0 0 10px 30px; margin:0; background:url(li.png) no-repeat 0 7px; } </style> </head> <body> <p>Каж же хорош наш сайт по html и css. С помощью него вы:</p> <ul> <li>Узнаете интересные приемы в верстке</li> <li>Научитесь красиво верстать</li> <li>Узнаете о возможных подводных камнях в верстке</li> <li>Будете молиться, когда же умрет ИЕ6</li> <li>Вам повезет в жизни )</li> <li>Или убедитесь, что верстать я ни фига не умею :)</li> </ul> </body> </html> |
Вот что вышло:
Каж же хорош наш сайт по html и css. С помощью него вы:
- Узнаете интересные приемы в верстке
- Научитесь красиво верстать
- Узнаете о возможных подводных камнях в верстке
- Будете молиться, когда же умрет ИЕ6
- Вам повезет в жизни )
- Или убедитесь, что верстать я ни фига не умею
Fatal error: Call to undefined function wp_related_posts() in /home/k/kazanets/htmlcssinfo/public_html/wp-content/themes/htmlcsstheme/single.php on line 70