Последние исследования в области веб-дизайна
Как показывают, последние исследования, пользователи, положительно реагируют, на видео материалы на сайте.

Дек 26, 2012

Встроенные стили


Рассмотрим, как позиционировать три объекта-изображения и два фрагменты текста. Координаты специально выбраны так, чтобы объекты пе-рекривалися. Обратите внимание, следует использовать атрибут 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>

Предыдущая   -    Страница: 3 из 4    -   Следующая

Навигация: 1  2  3  4  

Другие статьи по теме:

- Раздел каскадных стилей css
- Html: путь из недавнего прошлого к светлому будущему
- Встроенные стили
- Визуальный редактор веб-сайтов
- Фреймы, их теги и атрибуты

На российский рынок приходит крупнейший продавец стоковых изображений - Depositphotos.
Издательство "ИндексМаркет" анонсирует книгу Александры Саньковой - под названием "23"
Российская компания создала первый сайт по дизайн-исследованиям, так как тема дизайна не достаточна развита в России
     Баннеры | Советы web-дизайнеру | Flash | Html и CSS | Уроки Photoshop | Юзабилити
2003-2016 © sredaboom.ru
карта сайта обратная связь на главную