Студопедия

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

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

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






  • Листинг 2






    < HTML>

    < HEAD>

    < TITLE> Абсолютное позиционирование< /TITLE>

    < /HEAD>

    < BODY bgcolor=white text=black>

    < H1> Абсолютное позиционирование< /H1>

    < P>

    Обе картинки абсолютно позиционированы в точку (100, 50). Начало координат для одной картинки совпадает с началом документа, для второй& nbsp; & #151; с началом таблицы.

    < TABLE border=l cellspacing=0 cellpadding=10

    style=" position: absolute; left: 50px; top: 300px; " >

    < TR> < TD>

    Таблица абсолютно позиционирована.

    < IMG src=gerbrk.jpg width=85 height=80 border=0

    alt=" Герб Казахстана"

    style=" position: absolute; left: 100px; top: 50px; " >

    < /TD> < /TR>

    < /TABLE>

    < IMG src=kbtu.jpg width=126 height=60 border=0

    alt=" Старый дом правительства"

    style=" position: absolute; left: 100px; top: 50px; " >

    < /BODY>

    < /HTML>

    Задания:

    1. Картинку – герб РК позиционируйте в точку (80, 40) относительно таблицы, затем в точку 150, 150. В каждом случае измените размеры окна браузера и посмотрите как передвигается по экрану рисунок.

    2. Картинку – Старый дом правительства позиционируйте в точку (50, 100) относительно окна документа. Измените размеры картинки на (140, 800) пикселы. Фон вокруг текста сделайте синим.

    3. Поменяйте местами картинки, соответственно и их размеры. Позиционируйте герб относительно верхнего левого угла документа.

    Приведенные примеры показывают, что абсолютно позиционированные элементы выпадают из процесса обычного последовательного форматирования. Браузер не берет в расчет порядок следования кодов, а учитывает только вложенность для определения начала координат. Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы.

    Порядок следования кодов абсолютно позиционируемых элементов становится важным, если они начинают перекрывать друг друга: «выше» оказывается тот элемент, код которого идет, позже (листинг 3, рис.4).

     

    Рис. З. Две абсолютно позиционированные картинки

    Рис. 4.Картинка, код которой расположен позже, перекрывает картинку, код которой идет раньше






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