17:23 

Изучаем маркированные списки

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Синтаксис маркированного списка:



Где ul - вид списка (маркированный), li - пункт списка. По умолчанию список обозначается круглыми маркерами. Маркеры меняются через свойство list-style.


Квадратные маркеры

  • пункт списка

  • пункт списка

  • пункт списка



Окружность

  • пункт списка

  • пункт списка

  • пункт списка



Картинки
Ссылка должна быть обязательно из вашей БИ и начинаться с /userdir

  • пункт списка

  • пункт списка

  • пункт списка





Используя картинку в качестве стиля маркера, нельзя задать ей положение, расстояние от текста, размер. Для более гибких настроек можно использовать картинку не в качестве стиля маркера, а как background. Для этого задается маркерам list-style: none и фон каждому пункту. Выглядит это так, например:

  • пункт списка

  • пункт списка

  • пункт списка





no-repeat для неповторяемости, отступ в 25px, чтобы картинка не наезжала на текст, масштабирование картинки.

С помощью стилей можно оформить цвет, размер, шрифт и прочее.

  • пункт списка

  • пункт списка

  • пункт списка




Что делать, если хочется сделать маркер одного стиля, а текст другого? Задавать тексту отдельный стиль через span.

  • пункт списка

  • пункт списка

  • пункт списка



По умолчанию маркеры идут вне текстового блока. Outside можно не ставить.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Чтобы маркер шел в тексте, нужно задать ему положение inside.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Ссылки по теме: htmlbook.ru/faq/theme/list/ul

@темы: мануалы

   

Верстка Фандомной Битвы

главная