Как делать в html вложенные списки?

Всех приветствую. Ранее я уже писал несколько статей о списках, но сегодня речь пойдет о том, как делать в html вложенные списки. Мало того, не только их создавать, но и оформлять через css.

Начать нужно с того, чтобы хотя бы напомнить, как создается список вообще. Например, маркированный.
список
На скриншоте вы можете видеть код, который необходим для создания простейшего маркированного списка из трех пунктов. При этом тег ul непосредственно создает контейнер для пунктов списка, а li — это каждый его отдельный пункт. В каждом пункте может быть любое содержимое, в том числе и вложенный список. Нужно просто создать новый ul между открывающим и закрывающим тегом li. Это вы можете видеть на этом скрине:
вложенный список
То есть все на самом деле невероятно просто — всего лишь нужно вставить список в один из пунктов. Таким образом вы можете создавать списки любого уровня вложенности. Вот так это выглядит, если без css:
вид

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

Как оформить через css вложенные списки?

О неплохом варианте оформления нумерованных списков я писал здесь, советую вам ознакомиться. Если же говорить о маркированных, то для их оформления обычно заменяют картинку маркера. О том, как это сделать, написано во второй части этой статьи.

Единственное, что нужно дополнить, это то, что для задания маркера родительскому списку используется просто селектор ul, но чтобы дотянуться до вложенного, нужно использовать такой селектор — ul ul. Вообще, если вы плохо разбираетесь в селекторах css, советую вам почитать данную статейку.

Соответственно, чем выше уровень вложенности, тем более точным должен быть селектор. Например, ul ul ul выберет все списки третьего уровня вложенности. Впрочем, в стандартной практике верстки лично мне пока никогда не приходилось работать с такими громоздкими списками.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: