Использование CSS и HTML

Лабораторная работа N3. Использование CSS и HTML

Цель работы: Создать страницу, которая выглядела бы точно так же, как приведенная на рис. 1. Добавить ее на свой сайт.

Рис. 1 - Образец страницы

Порядок выполнения работы:

1.     Для выполнения данной лабораторной работы Вам могут понадобиться следующие свойства CSS: padding, text-align, position, background-color, width, height, float, right, top, opacity, color, background-position, background.   Научитесь ими пользоваться.

2.     Создайте на своем сайте новую web-страницу, причем такую, чтобы она выглядела как можно более похожей на заданную в примере. Текст на странице может быть другим. Используйте эффект прозрачности (в примере - тень от белых прямоугольника с датой).

3.     Страница должна быть «резиновой». При изменении размеров окна браузера (см. рис. 2) белые прямоугольники с тенью и текстом должны остаться на своих местах относительно «родительских» блоков.

Рис. 2. Страница после масштабирования

4.     Для добавления на сайт фрагмента изображения используйте прилагающийся файл grivb.jpg (см. рис. 3).

Рис. 3. Изображение grivb.jpg

 Это изображение нужно задать в качестве фона для тега <div> (см. свойство background) и сдвинуть его с помощью свойства background-position так, чтобы в прямоугольнике, заданном тегом <div> была видна именно голова Гривуса (робота на рис. 3).

5.     Все белые прямоугольники с датой должны иметь один и тот же стиль. 

6.     Добавьте на свой основной сайт ссылку на созданную  во время лабораторной работы страницу.

7.     Ответьте на дополнительные вопросы преподавателя.