-Фотоальбом

Посмотреть все фотографии серии Мои соседи
Мои соседи
13:31 05.07.2020
Фотографий: 3
Посмотреть все фотографии серии тюльпаны
тюльпаны
20:05 11.05.2020
Фотографий: 5

 -Рубрики

 -Цитатник

Музыка прожитых лет.. - (0)

Музыка прожитых лет... Себе. В преддверии...   ...

КУЛИНАРИЯ✓НИКАКИХ МАКАРОН! ПАСТА ИЗ КАБАЧКОВ И НИКТО НЕ ДОГАДАЕТСЯ, ЧТО ЕСТ КАБАЧКИ - (0)

КУЛИНАРИЯ✓НИКАКИХ МАКАРОН! ПАСТА ИЗ КАБАЧКОВ И НИКТО НЕ ДОГАДАЕТСЯ, ЧТО ЕСТ КАБАЧКИ ...

Люблю тебя сейчас... - (0)

Люблю тебя сейчас...   ...

Шаловливый июль - (0)

Шаловливый июль...   Доброе...

Лекарство от хандры. - (0)

Лекарство от хандры. Откройте окна! В дом впустите утро, Как лучшее лекарство от ха...

 -Поиск по дневнику

Поиск сообщений в Вера_Верочка_Веровь

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 19.12.2016
Записей: 2194
Комментариев: 636
Написано: 4534


Рамка с картинкой сверху (учимся делать рамки - классный урок!!!)...

Воскресенье, 08 Января 2017 г. 22:00 + в цитатник
Цитата сообщения bloginja

<


Рамка с картинкой сверху.












ЗАГОЛОВОК


ТЕКСТ
Bloginja



В предыдущих уроках для создание рамки мы использовали тег table и его стилевые значения. Но здесь мы его заменим. Вместо table будем использовать элемент div.


Открываем редактор и начинаем писать



<div style= >
открываем кавычки
<div style=" > и начинаем вписывать атрибуты стиля.


Нам нужен фон (background-color ), его размер (width), отступ ( padding) от предыдущего фона или текста... Вставляем и закрываем кавычки.
<div style=" background-color:#FF3016; width:400px; padding: 6px;">


Один слой фона у нас готов. Его можно использовать как фон для постов.
Осталось поставить закрывающий тег </div>.
Получим код слоя:
1 часть <div style=" background-color:#FF3016; width:400px; padding: 6px;" >
СОДЕРЖАНИЕ
2 часть </div>



СОДЕРЖАНИЕ



Теперь можно повторить каждую часть кода, изменяя цвет фона и отступ, и получить рамку в несколько слоёв.
Важно! Ширину в последующих частях кода лучше удалить, оставив только в первом!
Лучше - не значит обязательно. В этих рамках можно проявить разные фантазии.


<div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;">
СОДЕРЖАНИЕ
</div> </div> </div>



СОДЕРЖАНИЕ



Теперь мы будем ставить картинку сверху этой рамки слева или справа

Код картинки такой
<img src="//s010.radikal.ru/i311/1604/84/ab5af29998b1.png" width="400" height="169">


Мы будем ставить её по правому краю, вставим в код атрибут выравнивания align="right"
<img src="//s010.radikal.ru/i311/1604/84/ab5af29998b1.png" width="400" height="169" align="right">


Поставим этот код перед началом кода рамки
<img src="//s010.radikal.ru/i311/1604/84/ab5af29998b1.png" width="400" height="169" align="right">
<div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;">
СОДЕРЖАНИЕ
</div> </div> </div>



Чтобы картинка не уходила в сторону , нужно вставить наш готовый код в рамку без фона и поставить её по центру, т.е. пишем в самое начало кода
<div align="center">
<table border="0"><tbody><tr><td style="padding: 0px;" width="400">

и в самый конец пишем закрывающие теги
</td></tr></tbody></table> </div>


Код нашей рамки будет выглядеть так:
<div align="center">
<table border="0"><tbody><tr><td style="padding: 0px;" width="400">
<img src="//s010.radikal.ru/i311/1604/84/ab5af29998b1.png" width="400" height="169" align="right">
<div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;">
СОДЕРЖАНИЕ
</div> </div> </div>
</td></tr></tbody></table> </div>



Если картинка становится слишком низко, поднять её можно тегом <br> (переход на другую строку), установив его после кода картинки. Я поставила три тега.


Ещё`нужно установить атрибуты текста
<center><font size="3" color="8b4513" face="verdana">ТЕКСТ</font></center>
center - по центру
size - размер шрифта
color - цвет шрифта
face - гарнитура шрифта


Все, рамка готова. Её код
<div align="center">
<table border="0"><tbody><tr><td style="padding: 0px;" width="400">
<img height="169" src="//s010.radikal.ru/i311/1604/84/ab5af29998b1.png" width="400" align="right"><br><br><br>
<div style=" background-color:#FF3016; width:400px; padding: 6px;"><div style=" background-color:#089800; padding: 7px;"><div style=" background-color:#fffff0; padding: 15px;">
<center><font size="3" color="8b4513" face="verdana">ТЕКСТ</font></center>
</div> </div> </div>
</td></tr></tbody></table>
</div>




А так она будет выглядеть







ТЕКСТ




Урок 1
Урок 2
Урок 3

bloginja

Серия сообщений "________ - Делаем рамочки -":
Часть 1 - Делаем рамочку для текста без ФШ...
Часть 2 - Учимся делать рамочки (вникаем в суть)... Урок № 1 от bloginja...
...
Часть 11 - Обводка внутри рамки (блока)...
Часть 12 - Простые рамочки-обводки для текста
Часть 13 - Рамка с картинкой сверху (учимся делать рамки - классный урок!!!)...
Часть 14 - Рамочка с выступающей справа картинкой
Часть 15 - HTML рамка - КОЛЛАЖ...
...
Часть 18 - Поговорим о рамочке для текста "Рамочка-книжка"
Часть 19 - *** ДВЕ рамочки с вертикальными бордюрами...
Часть 20 - И снова — «Рамочка-книжка»


Понравилось: 2 пользователям

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку