CSS-оформление через CSS-классы
Компонент лендинга составляет посадочные страницы из отдельных блоков информации, которые можно настраивать по своему усмотрению как в плане наполнения, так и в плане оформления. Но не смотря на то, что лендинг имеет широкие возможности по настройке оформления самих блоков и расположенной в них информации, их может быть недостаточно, но в этом случае на выручку приходит оформление через CSS-классы. CSS-оформление даёт возможность оформить посадочную страницу именно так, как это необходимо, без ограничений встроенного редактора.Каждый блок состоит из 2 или 3 DIV-блоков:
- .landing – общее оформление всех блоков
- .landing_2nd – отвечает за ширину блоков (не отображается при разворачивании блока на всю ширину)
- .landing_3rd – отвечает за отступы
Каждый блок имеет индивидуальный класс и идентификатор:
- #landing_[id-bloka]
- .landing_[id-bloka] (использовать можно, но не рекомендуется)
Идентификаторы можно использовать как для CSS-оформления каждого блока в индивидуальном порядке, так и для навигации по странице вида
<a href="#landing_[id-bloka]">ссылка</a>, так и для прокрутки посредством функции ruen_scroll('landing_[id-bloka]', 0)Для гибкой настройки CSS-стилей можно использовать сочетание идентификатора блока с классом вложенного DIV-блока.
- .landing_spoiler P { } – блок ссылок
- .landing_spoiler P A { } – ссылки, включающие тексты
- .landing_spoiler DIV { } – тексты
- .landing_spoiler .show { } – текст отображенный (height opacity overflow transition перекрывать через important)
- .landing_spoiler .hide { } – текст скрытый (height opacity overflow transition перекрывать через important)