CMS RUEN
ruen.suCMS RUEN
ОсновноеОтображениеВзаимодействиеПродажиРекламаПрочееСпециализированное

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)
185 | 1 2017.12.14, 22:01
Информация на данной странице недостаточно понятна, не полна или содержит ошибки? Просто напишите нам об этом и мы все исправим.Напишите замечание!