Название: Основы ООП. Задания		Конфиденциально
PID: EPMR-TCSR DID: EPAM Systems	Версия: 1.0 Статус: Initial	Сохранено: 17-фев-15

	Основы ООП. Задания
	EPMR-TCSR

ИСТОРИЯ ИЗМЕНЕНИЙ

Версия	Описание изменений	Автор	Дата	Утверждено Имя Дата
<1.0>	Initial version	Dmitrii_Turlychkin@epam.com	<16-Oct-2012>

СВЯЗАННЫЕ ДОКУМЕНТЫ

Номер	Название документа

Задание 1

Выберите задание, последняя цифра номера которого совпадает с последней цифрой номера вашей зачетной книжки. Выполните приведенное задание.

1. Все оформление производится средствами CSS без рисунков.

2. Отображаться должно корректно во всех современных браузерах.

3. HTML страница должна в точности соответсвовать заданию.

Вариант 1

Создайте меню, показанное на рисунке ниже, на HTML5 с помощью тегов <ul>, <li> и с соблюдением следующих условий:

- ширина меню фиксирована и равна 200px.

Вариант 2

Сверстайте форму регистрации, показанную на рисунке ниже. Ширина формы и её полей фиксирована.

Вариант 3

Сделайте ниспадающее меню, показанное на рисунках.

Рис. 1. Исходный вид меню

Рис. 2. Вид меню при наведении на первый пункт

Рис. 3. Вид меню при наведении на второй пункт

Вариант 4

Сделайте страницу, как показано на рисунке ниже. Ширина блока резиновая и меняется в зависимости от размеров окна браузера. Указатель всегда располагается посередине блока, размеры указателя фиксированы.

Вариант 5

Создайте страницу, показанную на рис. 1. Ширина блока фиксирована. Постарайтесь обойтись одним изображением (рис. 2), добавляя его как фоновый рисунок.

Рис. 1 Конечное изображение

Рис. 2 Изображение необходимое для верстки

Вариант 6

Сделайте страницу, как показано на рисунке ниже. Ориентируйтесь на последние версии браузеров, использовать стилевые префиксы не обязательно.

Вариант 7

Создайте на HTML5 веб-страницу, показанную на рисунке ниже.

Вариант 8

Сделайте страницу, как показано на рисунке ниже, которая корректно должна отображаться во всех современных браузерах. Обратите внимание на небольшой градиент в блоке, светлую рамку вокруг и скругление уголков снизу.

Вариант 9

Поле для игры в так-тикс имеет размер 5х5 клеток, в каждой клетке содержится круглая фишка (рис. 1).

Рис. 1. Исходное поле для игры в так-тикс

При наведении курсора мыши на любую клетку подсвечивается ряд, строка и сама фишка (рис. 2).

Рис. 2. Вид поля при наведении на клетку курсора мыши

Напишите код с использованием только HTML5 и CSS при соблюдении ряда условий:

• работать должен во всех современных браузерах, на старые версии можно не обращать внимания;

• все размеры фишек и клеток заданы изначально и не меняются;

• постарайтесь сделать HTML-код компактным, без ввода дополнительных классов.

Вариант 10

Сделайте указатель шагов показанный ниже на рисунке. Шаги должны корректно отображаться в браузерах Opera 12+, Firefox 6+, Chrome 12+. Для IE достаточно сделать горизонтальные прямоугольники без стрелок и градиентов. Все элементы должны отображаться правильно независимо от выбранного текущего шага.

© EPAM Systems, 2012

Страница: 7/7