Рамки с заголовком текста и изображений, с настройкой фона и размеров
Здравствуйте дорогие гости и читатели. Сегодня у нас тема о рамочках с заголовком. Мы научимся вставлять текст или картинку в заголовок рамки, будем менять фоны, настраивать форму и размеры рамок. Ниже смотрите рамки с кодами с заголовком текста и изображения справа, по центру, слева.
Если добавить перед заголовком строку: <font face="Monotype Corsiva" size="+2" color="#0e5198">Ваш заголовок</font>, изменить размер (border:) и цвет (#000000) окантовки рамки, то получится рамочка с красивым заголовком такого вида
Давайте приукрасим нашу рамочку: добавим фон ("background: #FFFC8B;) и изменим форму рамки (ridge). Получим такой вид рамки.
Чтобы изменить высоту и ширину рамки, добавим в код height-высоту и width-ширину. Высоту настраивайте по объему текста.
Вместо текста в заголовок можно вставить картинку, получим рамочку такого вида:
Адрес картинки на сайте Radikal, первая ссылка. Кто еще не читал мой пост Как узнать URL адрес изображения, перейдите сюда. Можно настраивать высоту и ширину изображения, выделено жирным.
В этой рамке так же можно изменить фон и размер рамки. Только в отличие от верхних ( которые растягиваются), когда будете писать текст, регулируйте высоту рамки по объему текста. Смотрите на код внимательно, там два размера высоты и ширины: рамки и картинки
✔Ниже заголовки в рамках в разных браузерах будут отображаться по разному. Вернее сказать, они могут не располагаться по центру и справа, а только слева. Но я на всякий случай напишу как выполнить выравнивание.
Если код выровнять по центру: <center>код</center>, то заголовок будет в центре рамки
Эта рамка с картинкой на всю ширину страницы
Чтобы заголовок расположить справа, код надо выровнять такой строкой: <div align="right">код</div> Получим рамку с заголовком справа.
В редакторе сообщений blogger, можно изменить размер и цвет заголовка. Обведите, как при копировании левой кнопкой мыши заголовок, затем слева выбирайте шрифт, размер: маленький, большой или очень большой. Можно настроить курсив и жирный текст заголовка.
Какие бывают формы рамки читайте в моем посте: Как выделить часть текста в рамку. Вот собственно на сегодня все. Комментируйте, делитесь с друзьями, а я говорю Вам До свидания.
Какие бывают формы рамки читайте в моем посте: Как выделить часть текста в рамку. Вот собственно на сегодня все. Комментируйте, делитесь с друзьями, а я говорю Вам До свидания.
Рекомендуемый контент:
Ольга, очень симпатично смотрится. Иногда просто необходимо оформить.более индивидуально отдельную страницу в блоге.
ОтветитьУдалитьВика, согласна с Вами, мне тоже нравится. Тем более, что использовав формы рамки и различные цвета, а так же другие настройки, можно оформить рамку в своем, индивидуальном стиле. Таким образом оформить страницу блога, чтобы запомнилась посетителям.
Удалить