Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Листинг 7
< HTML> < HEAD> < МЕТА http-equiv=" Content-Type" content=" text/html; charset=windows-1251" > < TITLE> Смешаннoe позиционирование< /TITLE> < /HEAD> < BODY bgcolor=white text=black> < Н1> Смешанное позиционирование< /Н1> < P> Таблица относительно позиционирована вправо на 50 пикселов. Внутри кода таблицы расположена картинка с абсолютным позиционированием (0, 100). < Р> < TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style=" position: relative; left: 50px; top: 0px" > < P> < IMG src=./pic/let.gif width=126 height=60 border=0 alt=Университет align=left hspace=10 style=" position: absolute; left: 0px; top: l00px; " > Тег < TT> < B> IMG< /B> < /TT> размещается внутри таблицы. Для картинки записано абсолютное позиционирование вниз на 100 пикселов.< BR clear=left> < /TD> < /TR> < /TABLE> < /BODY> < /HTML> Рис. 9.Relative (absolute)
Рис. 10.Схема позиционирования Absolute [absolute] Код абсолютно позиционированной картинки расположен внутри кода абсолютно позиционированной таблицы. Картинка не меняет своего положения на экране при изменении размера окна, потому что координаты таблицы остаются неизменными (листинг 8, рис. 11, 12). Листинг 8 < HTML> < HEAD> < META http-equiv=" Content-Type" content=" text/html; charset=windows-1251" > < TITLE> Смешанное позиционирование< /TITLE> < /HEAD> < BODY bgcolor=white text=black> < H1> Смешанное позиционирование< /H1> < P> Таблица абсолютно позиционирована в точку (50, 0). Внутри кода таблицы расположена картинка с абсолютным позиционированием в точку (0, 120). < P> < TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style=" position: absolute; left: 50px; top: 0px" > < TR> < TD> < P> < IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style=" position: absolute; left: 0px; top: 120px; " > Тег < TT> < B> IMG< /B> < /TT> размещается внутри таблицы. Для картинки записано абсолютное позиционирование в точку (0, 120). < BR clear=left> < /TD> < /TR> < /TABLE> < /BODY> < /HTML> Рис.11. Absolute (absolute)
Рис. 12.Схема позиционирования Relative [relative] Код относительно позиционированной картинки расположен внутри кода относительно позиционированной таблицы. Когда положение таблицы меняется на экране из-за изменения размеров окна, меняется и положение картинки: ведь смещается начало координат, ниже которого на 100 пикселов должна быть расположена картинка (листинг 9, рис. 13, 14). Рис. 13.Relative [relative] Рис. 14.Схема позиционирования
|