Встроенные стили
Рассмотрим, как позиционировать три объекта-изображения и два фрагменты текста. Координаты специально выбраны так, чтобы объекты пе-рекривалися. Обратите внимание, следует использовать атрибут STYLE, а не тег <STYLE>.
1 .В программе Блокнот введите следующий текст веб-страницы:
<HTML>
<HEAD>
<Тить> Позиционирование </ тить>
</ HEAD>
<BODY>
<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100">
<IMG SRC = "fly. jpg "X / DIV>
<DIV STYLE="position: absolute; top: 10; left: 15; width: 600; height: 100">
<H1 STYLE="color: yellow"> IloBiii, ветер, до восток восходящего к восток солнца, край окошка.</ HlX / DIV>
<DIV STYLE="position: absolute; top: 60; left: 400; width: 50; height: 100">
<H1 STYLE="color: blue"> 4aiiKa </ Hl> </ DIV>
</ BODY>
</ HTML>
Ter <DIV> здесь выполняет роль контейнера: элементы, находятся в нем, наследуют его свойства, указанные в атребуте STYLE. Первый контейнер содержит изображение, тип которого является абсолютным, с нулевым отступом сверху,
70 пикселей - отступ; его ширина составляет 50, высота - 100 пикселей. Второй контейнер содержит текст «Проституток, ветер, до рассвета, до восхода солнца, край окошка», он смещен на 10 пикселей от начала страницы вниз и на 15 влево, ширина контейнера - 600, высота - 100 пикселей; благодаря –использованию тега hJ с атрибутом STYLE текст имеет соответствующий заголовок первого уровня размер и желтый цвет. Третий контейнер смещен на 60 пикселей вниз и 400 слева, ширина контейнера - 50, высота - 100 пикселей. Слово «Чайка» оформлено как заголовок первого уровня синего цвета.
2.Сохраните этот документ в файле с именем pryklad2.html. Скопируйте в папку с этим документом изображения fly.jpg (можно использовать другой файл, но его название должно совпадать с на-истреблен в HTML-документе).
3. Откройте файл pryklad2.html в браузере - контейнеры перекрываются соответствии с расположением в документе.
4. Внесите изменения в текст веб-страницы, который касается первого контейнера (с изображением). Для этого щелкните правой кнопкой мыши пустую область страницы в окне браузера и выбе-рить пункт Просмотр HTML-кода (View Source). В окне редактора, который появится, внесите следующие изменения:
<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100; z-index: 2">
<IMG SRC="fly. jpg"X/DIV>
Другие статьи по теме:
-
Визуальный редактор веб-сайтов-
Фреймы, их теги и атрибуты-
Структура html-документа-
Раздел каскадных стилей css-
Встроенные стили