# 106: Область построения фрагментов, часть 3 (HTML и CSS) - CSS-хитрости

Anonim

Мы почти закончили создание домашней страницы в области фрагментов сайта. Сразу же мы начинаем настраивать вещи и приводить в порядок больше вещей.

У нас есть странный опыт, когда абсолютно позиционированный псевдоэлемент не реагировал на отрицательное левое поле, но нормально работал с положительным правым полем. Кто знал.

Затем мы переходим к созданию «активного» класса для левого меню категорий сниппетов. Вы просматриваете только один из них за раз (список связанных фрагментов отображается справа). Скажем, «HTML» активен, и вы нажмете «CSS», новый список только связанных с CSS фрагментов появится справа. Чтобы показать, какой из них активен, нужно добавить некоторый стиль. Для нас достаточно изменить z-index активного класса (заставить его находиться над тенью).

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

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

Мы также решили, что на данный момент работает прямой список с одним столбцом, но если прокрутка станет слишком смешной, возможно, когда-нибудь мы сможем разбить его на два столбца и сократить его.