Варианты оформления сообщения в блоге

Приветствую всех, кто читает сегодняшнюю шпаргалку. Подниму опять тему, как можно красиво оформить сообщение в блоге. Шаблон трогать не будем, а сделаем это непосредственно в редакторе сообщений. Кому это придётся по душе, с лёгкостью сможет сделать красивое оформление поста.

В этом сообщении об этом уже я писала. А здесь делали красивые первые буквы в названии. Сейчас ещё один вариант. Вернее будет сказать, что принцип один, а вариантов много. Давайте смотреть.

За основу возьмём совершенно простой код.

<span style="width: 200px; float: right; text-align: center; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 10px; margin: 5px 0 5px 5px;">Здесь будет ваш текст в блоке</span>

В итоге мы получаем вот такой вариант

Вот так интересно можно оформить сообщение в блоге текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

При написании сообщения переходим в режим HTML и устанавливаем код, предложенный выше. В строке, выделенной синим цветом, будет ваш текст, который находится в правом блоке. Сразу после закрывающегося тега </span> пишем своё сообщение.

Вариант 2.


А здесь мы просто добавили фон
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Здесь я просто добавила к предыдущему коду фон отдельного блока. Значение #f6f6f6 меняйте на своё усмотрение.

Код.

<span style="background-color: #f6f6f6; border-bottom: 3px solid #000; border-top: 3px solid #000; float: right; margin: 5px 0 5px 5px; padding: 10px; text-align: center; width: 200px;">А здесь мы просто добавили фон </span>

Вариант 3.

Поменяем значение float: right; на float: left;  и вместо текста вставим картинку.

У лукоморья дуб зелёный; Златая цепь на дубе том: И днём и ночью кот учёный Всё ходит по цепи кругом; Идёт направо - песнь заводит, Налево - сказку говорит. Там чудеса: там леший бродит, Русалка на ветвях сидит; Там на неведомых дорожках Следы невиданных зверей; 

Примерно вот такой код.

style="background-color: #f6f6f6; border-bottom: 3px solid #000; border-top: 3px solid #000; float: left; margin: 5px 20px 5px 5px; padding: 15px; text-align: center; width: 250px;">

Картинку устанавливаем обычным способом и потом переходим в режим HTML и после вот такого примерно участка

вставляем код.

Вариант 3.

Уберём  значения в первом блоке border-bottom: 3px solid #000; и во втором border-top: 3px solid #000;. Если рамка вообще не нужна полностью удалите эту строку-
border-bottom: 3px solid #000; border-top: 3px solid #000;

А здесь мы просто убрали рамку и расположили блок слеваА здесь мы просто убрали рамку и расположили блок справа  текст текст текст текст текст текст текст   текст текст текст текст текст текст текст   текст текст текст текст текст текст текст   текст текст текст




Код такой. Возможно, придётся подгонять отступы (выделила красным).

<span style="background-color: #cc9999; border-bottom: 3px solid #000; float: left; margin: 5px 5px 5px 5px; padding: 10px; text-align: center; width: 150px;">Здесь текст левого  блока</span><span style="background-color: #f6f6f6; border-top: 3px solid #000; float: right; margin: 5px 0 5px 5px; padding: 5px; text-align: center; width: 150px;">Здесь текст правого блока</span>

На самом деле, таких вариантов можно добавлять ещё и ещё. Хватило бы фантазии.
А мне остаётся поставить на этом точку.  До новых встреч.

оформите подписку на новые шпаргалки

Введите Ваш email