Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Листинг 7






< HTML>

< HEAD>

< МЕТА http-equiv=" Content-Type"

content=" text/html; charset=UTF-8" >

< 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" >
< TR> < TD>

< 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=UTF-8" >

< 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.Схема позиционирования






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.