1. Создайте веб-страницу Моя учёба на основе системы слоёв (Рисунок 4)
(Коды элементов Вы можете брать из предыдущей части лабораторной работы)
2. Сначала разобьем изображение логически на слои:
a. Слой, включающий заголовок
b. Слой, включающий в себя верхние 2 картинки и стих
c. Слой, включающий в себя бегущую строку
d. Слой, включающий в себя нижние 2 картинки и стих
Рисунок 5
Код:
…
<div style="position:relative;" >
</div>
<div style="position:relative;" >
</div>
<div style="position:relative;" >
</div>
<div style="position:relative;" >
</div>
…
3. Слои b и d разобьем на 3 слоя и наконец определим выравнивание в слоях, а также их позиции, уточним стили всех слоёв:
c. Слой, включающий заголовок будет занимать 100% ширины экрана и будет выравнивать его содержимое по центру
d. Слой, включающий в себя верхние 2 картинки и стих будет занимать 100% ширины экрана. Содержит 3 слоя одинаковой ширины, но в связи с особенностью реализации слоёв структура будет следующая:
i. Подслой первый включает в себя левую картинку, имеет позицию абсолютную, начинается слева экрана и имеет ширину 33%, выравнивание по центру
ii. Подслой второй включает в себя правую картинку и стих, имеет позицию относительную, начинается слева на 33% и имеет ширину 67%, выравнивание по центру
1. Подслой первый включает в себя картинку, имеет позицию абсолютную, абсолютную начинается слева на 0% включающего слоя и занимает ширину 51%, выравнивание элементов по центру.
Особенность такой организации заключается в том, что с слой будет отсчитывать верхнюю позицию исключительно от относительного слоя (нам нужно от самого высокого, а это стихи – поэтому стихи становится относительным слоем)
4. Подслой второй включает в себя стихи, имеет позицию относительную, начинается слева на 51% включающего слоя и занимает ширину 49%, выравнивание элементов по центру
c. Слой, включающий в себя бегущую строку будет занимать 100% ширины экрана и будет выравнивать его содержимое по центру
d. Слой, включающий в себя верхние 2 картинки и стих будет занимать 100% ширины экрана. Содержит 3 слоя одинаковой ширины, но в связи с особенностью реализации слоёв структура будет следующая:
iii. Подслой первый включает в себя левую картинку, имеет позицию абсолютную, начинается слева экрана и имеет ширину 33%, выравнивание по левому краю
iv. Подслой второй включает в себя правую картинку и стих, имеет позицию относительную, начинается слева на 33% и имеет ширину 67%, выравнивание по центру
1. Подслой первый включает в себя картинку, имеет позицию абсолютную, начинается слева на 0% включающего слоя и занимает ширину 51%, выравнивание элементов по правому краю.
5. Подслой второй включает в себя стихи, имеет позицию относительную, начинается слева на 51% включающего слоя и занимает ширину 49%, выравнивание элементов по центру
Особенность такой организации заключается в том, что с слой будет отсчитывать верхнюю позицию исключительно от относительного слоя (нам нужно от самого высокого, а это стихи – поэтому стихи становится относительным слоем)