Как в рамку вставить изображение



Рамки с установкой изображений слева и справа


Здравствуйте Уважаемые гости и читатели моего блога. В этом сообщении мы будем учиться в наши рамки вставлять картинки справа, слева от текста, рассмотрим рамку с тремя изображениями. Я не буду тратить Ваше драгоценное время на вступление, каждый из Вас и так знает, какое значение имеют рамочки для дизайна страниц наших блогов. Поэтому давайте перейдем к информации. Ниже Вы видите рамку с тремя слоями и тремя вставленными картинками.

Здесь Ваш
текст


Это код такой рамочки:

<div style="background-color:#AB82FF; border-style: double; color:#AB82FF;padding:7px;"><div style="background-color:#029D74; border-style: double; color:#029D74;padding:7px;"><div style="background-color:#740576; border-style: groovee; color:#740576;padding:7px;"><div style="background-color:#AB82FF; border-style: groove; color:#AB82FF;padding:2px;"><div style="text-align: center; font: 16px Arial;font-style: italic;color: #000000; padding:2px;"><img src="http://s020.radikal.ru/i713/1407/cf/970b65cda638.jpg"width="100" height="80"align="left" ><img src="http://s020.radikal.ru/i713/1407/cf/970b65cda638.jpg"width="100" height="80"align="right">ВАШ <br>ТЕКСТ<br><img src="http://s020.radikal.ru/i713/1407/cf/970b65cda638.jpg"width="100" height="80"></div></div></div></div></div>

Если мы уберем два верхних слоя (выделено красным), то получим рамку такого вида (см. ниже): слой + фон. Так же я удалила url адреса изображений слева и внизу ( выделено синим). Изменила форму рамки: double на groove. Удаляем два не нужных уже закрывающих тэга </div>. Вы можете добавлять слои, сколько нужно, но будьте внимательны: важна каждая точка, кавычки, точка с запятой. Так же при добавлении слоя закрывайте его тэгом <div>.

Получим рамку с изображением справа такого вида. 


    ТЕКСТ ТЕКСТ  ТЕКСТ


                                                         ТЕКСТ ТЕКСТ ТЕКСТ                                                                                                                                                                                                                                                                                         Здесь текст

Код будет выглядеть вот так:

<div style="background-color:#00868B; border-style: groove; color:#00868B;padding:8px;">
<div style="background-color:#00CDCD; border-style: groove; color:#00CDCD;padding:2px;"><div style="text-align: center; font: 16px Arial;font-style: italic;color: #000000; padding:2px;"><img src="http://s018.radikal.ru/i515/1404/28/414f717eb7d6.jpg"width="100" height="110"align="right" >ваш текст</div></div></div>

Эта рамочка с такой же формой окантовки double, только с двумя изображениями справа и слева.



ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ



Здесь текст                                                                                                     Здесь текст 

 А это её код после внесенных изменений:


<div style="background-color:#8B5A2B; border-style: double; color:#8B5A2B;padding:8px;"><div style="background-color:#CDC9A5; border-style: double; color:#CDC9A5;padding:2px;"><div style="text-align: center; font: 16px Arial;font-style: italic;color: #000000; padding:2px;"><img src="http://img-fotki.yandex.ru/get/9815/95231862.11a/0_e5b29_16aeef28_-1-XS" width="100" height="100"align="left" ><img src="http://img-fotki.yandex.ru/get/9815/95231862.11a/0_e5b29_16aeef28_-1-XS" width="100" height="100"align="right">ВАШ <br>ТЕКСТ<br></div></div></div>

Ну а эта совсем простая, с изображением слева, и в которой можно установить только форму рамки и цвет фона.



ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ.....

                                                                                     
  ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ.......                                     

<div style="background-color:#ff8900; border-style: outset; color:#ff8900;padding:7px;"><div style="text-align: center; font: 16px Arial;font-style: italic;color: #000000; padding:2px;"><img src="http://s020.radikal.ru/i721/1407/f2/904e255f3656.jpg"width="70" height="85"align="left" >ваш текст</div></div>


"width="100" height="80"-это ширина и высота изображения, можно настраивать. Не забывайте только, если вставляете две или три картинки, изменить значение во всех изображениях. 

На этом у меня все. Будут вопросы, пишите. Делитесь со своими друзьями в социальных сетях. Всего Вам Доброго. Почитайте информацию: Готовые поздравительные рамочки для блогов и Рамки для текста с разным цветом окантовки .




Автор статьи ✎ Olga Protasova Выпуск ✹ 4/12/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *