Как подписать картинку?

Четверг, 08 Июля 2010 г. 16:47 + в цитатник

Цитата сообщения Rost

Прочитать целиком В свой цитатник или сообщество!

Небольшое дополнение в

Сегодня будем учиться подписывать картинки. Понимаю, что проще сделать это прямо на самой картинки, но подозреваю, что не всем такой подход нравится и не всегда это возможно.

Сегодня научу, как делать вот такую конструкцию:

Кнопка «Самоучитель по ЛиРу»

Вы не поверите, но чтобы такое сделать, придётся научится ... рисовать рамки!
Да-да! Вы не ослышались.

Толщина рамки
Может определятся в пикселях (например: "2px") или в относительных значениях ("thin", "medium" или "thick").

Цвет рамки
Определяется как обычно в html: #123456", "rgb(123,123,123)" или просто "orange".

Типы рамок
А вот тут надо показывать.

dotted

dashed

solid

groove

ridge

inset

outset

Вот собственно и всё. Теперь надо сделать таблицу, внутрь её вставить картинку, а саму таблицу окружить рамкой.

Сложно? Тогда вот вам готовый код:

<table border="0" cellspacing="0" cellpadding="0" style="border: 1px solid black; width: 200px; margin: 3px 3px 3px 0; float:left;"><td style="padding: 3px 3px 3px 3px;"><img src="тут  адрес картинки" width="200" height="50" border="0" /></td><tr><td style="padding: 3px 3px 3px 3px; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-align: center;">Тут подпись картинки</td></tr></table>

Хочу обратить ваше внимание на 2 момента:
1. Текст " style="border: 1px solid black;" описывает свойства вашей рамки.
Первый параметр ("1px") - это её толщина.
Второй параметр ("solid") - это её тип.
Третий параметр ("black") - её цвет.

2. Размер картинки (width="200") должен совпадать с размером рамки ("width: 200px"). Ну, или по крайней мере быть не меньше.

Кстати, в рамки можно вставлять не только картинки.
Например:

Чайф и Николай Фоменко - «Прощай детка, детка прощай»

Update
Как сделать такой плеер?

LI 5.09.15

Серия сообщений "блог":
Часть 1 - Поговорим о тексте и различных манипуляциях с ним.
Часть 2 - Как подписать картинку?
Часть 3 - Фоны для днева.
Часть 4 - Коды оформления блога
Часть 5 - Схема за две минуты
Часть 6 - Фоны...

Метки: блог

<a href="https://www.liveinternet.ru/users/3586051/post130062517/">РљР°Рє РїРѕРґРїРёСЃР°С‚СЊ РєР°СЂС‚РёРЅРєСѓ?</a><br/>РќРµР±РѕР»СЊС€РѕРµ РґРѕРїРѕР»РЅРµРЅРёРµ РІ 
РЎРµРіРѕРґРЅСЏ Р±СѓРґРµРј СѓС‡РёС‚СЊСЃСЏ РїРѕРґРїРёСЃС‹РІР°С‚СЊ РєР°СЂС‚РёРЅРєРё. РџРѕРЅРёРјР°СЋ, С‡С‚Рѕ РїСЂРѕС‰Рµ СЃРґРµР»Р°С‚СЊ СЌС‚Рѕ РїСЂСЏРјРѕ РЅР° СЃР°РјРѕР№ РєР°СЂС‚РёРЅРєРё, РЅРѕ РїРѕРґРѕР·СЂРµРІР°СЋ, С‡С‚Рѕ РЅРµ РІСЃРµРј С‚Р°РєРѕР№ РїРѕРґС…РѕРґ РЅСЂР°РІРёС‚СЃСЏ Рё РЅРµ РІСЃРµРіРґР° СЌС‚Рѕ РІРѕР·РјРѕР¶РЅРѕ.

РЎРµРіРѕРґРЅСЏ РЅР°СѓС‡Сѓ, РєР°Рє РґРµР»Р°С‚СЊ РІРѕС‚ С‚Р°РєСѓСЋ РєРѕРЅСЃС‚СЂСѓРєС†РёСЋ:
РљРЅРѕРїРєР° В«РЎР°РјРѕСѓС‡РёС‚РµР»СЊ РїРѕ Р›РёР СѓВ»

Р’С‹ РЅРµ РїРѕРІРµСЂРёС‚Рµ, РЅРѕ С‡С‚РѕР±С‹ С‚Р°РєРѕРµ СЃРґРµР»Р°С‚СЊ, РїСЂРёРґС‘С‚СЃСЏ РЅР°СѓС‡РёС‚СЃСЏ ... СЂРёСЃРѕРІР°С‚СЊ СЂР°РјРєРё!
Р”Р°-РґР°! Р’С‹ РЅРµ РѕСЃР»С‹С€Р°Р»РёСЃСЊ.

РўРѕР»С‰РёРЅР° СЂР°РјРєРё
РњРѕР¶РµС‚ РѕРїСЂРµРґРµР»СЏС‚СЃСЏ РІ РїРёРєСЃРµР»СЏС… (РЅР°РїСЂРёРјРµСЂ: "2px") РёР»Рё РІ РѕС‚РЅРѕСЃРёС‚РµР»СЊРЅС‹С… Р·РЅР°С‡РµРЅРёСЏС… ("thin", "medium" РёР»Рё "thick").

Р¦РІРµС‚ СЂР°РјРєРё
РћРїСЂРµРґРµР»СЏРµС‚СЃСЏ РєР°Рє РѕР±С‹С‡РЅРѕ РІ html: #123456", "rgb(123,123,123)" РёР»... <a href="https://www.liveinternet.ru/users/3586051/post130062517/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Приложения

-Метки

-Рубрики

-Цитатник

-Музыка

-Фотоальбом

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

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

-Интересы

-Друзья

-Постоянные читатели

-Сообщества

-Трансляции

-Статистика

Как подписать картинку?