Учимся делать рамки. Урок 3. ( Восстановленный урок от блогера bloginja )
02-02-2023 12:57
к комментариям - к полной версии
- понравилось!
Восстановила еще один пост по созданию рамочек. На всех рамочках и в конце данного поста указан НИК, по которому можно зайти в дневник автора. В дневнике много полезного и поучительного.
Рамка с картинкой сверху.
В предыдущих уроках для создания рамки мы использовали тег 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="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.png" width="400" height="169">
Мы будем ставить её по правому краю, вставим в код атрибут выравнивания align="right"
<img src="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.png" width="400" height="169" align="right">
Поставим этот код перед началом кода рамки
<img src="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.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="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.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="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.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>
А так она будет выглядеть
Восстановила еще один пост по созданию рамочек. На всех рамочках и в конце данного поста указан НИК, по которому можно зайти в дневник автора. В дневнике много полезного и поучительного.
Рамка с картинкой сверху.
 ТЕКСТ |
В предыдущих уроках для создания рамки мы использовали тег 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="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.png" width="400" height="169">
Мы будем ставить её по правому краю, вставим в код атрибут выравнивания align="right"
<img src="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.png" width="400" height="169" align="right">
Поставим этот код перед началом кода рамки
<img src="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.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="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.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="//img1.liveinternet.ru/images/attach/d/3/159/341/159341929_k4.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>
А так она будет выглядеть
Вы сейчас не можете прокомментировать это сообщение.
Дневник Учимся делать рамки. Урок 3. ( Восстановленный урок от блогера bloginja ) | tomishka - Дневник tomishka |
Лента друзей tomishka
/ Полная версия
Добавить в друзья
Страницы:
раньше»