Секреты ЖЖ - 39. Структура поста: создание div-блоков

[top2016]

Некоторые возможности в этой области предоставляет тег lj-cut, который позволяет скрывать/открывать фрагмент поста.

Но с точки зрения кодировки html, блочную структуру можно реализовать с помощью тега div, который создает контейнер для размещения отдельных блоков. Если размер текста превышает размер контейнера - то для его просмотра появляется полоса прокрутки (хотя на мобильных устройствах полоса может быть и не видна, но прокрутка всё равно по факту есть).

Например:

Зимнее утро
А.С.Пушкин

Мороз и солнце; день чудесный!
Еще ты дремлешь, друг прелестный -
Пора, красавица, проснись:
Открой сомкнуты негой взоры
Навстречу северной Авроры,
Звездою севера явись!

Вечор, ты помнишь, вьюга злилась,
На мутном небе мгла носилась;
Луна, как бледное пятно,
Сквозь тучи мрачные желтела,
И ты печальная сидела -
А нынче... погляди в окно:

Под голубыми небесами
Великолепными коврами,
Блестя на солнце, снег лежит;
Прозрачный лес один чернеет,
И ель сквозь иней зеленеет,
И речка подо льдом блестит.

Вся комната янтарным блеском
Озарена. Веселым треском
Трещит затопленная печь.
Приятно думать у лежанки.
Но знаешь: не велеть ли в санки
Кобылку бурую запречь?

Скользя по утреннему снегу,
Друг милый, предадимся бегу
Нетерпеливого коня
И навестим поля пустые,
Леса, недавно столь густые,
И берег, милый для меня.

Здесь была использована следующая кодировка:



Основные атрибуты тега div:
border - стиль границы блока
width - ширина блока
height - высота
padding - отступ
background-color - цвет