Практические задания:

1) Реализуйте примеры таблиц (рис. 2 и рис. 3).

2) Измените форматирование таблицы на следующий вариант:

Рисунок. 9.

3) Измените форматирование: задайте одинаковую высоту строк и установи­те чередование фона («зебра»).

Указание: используйте разные классы стилей для четных и нечетных строк таблицы.

Рисунок 10

4*) Модифицируйте таблицу из задания «3». Чередование цвета фона у строк замените чередованием цвета фона у колонок.

5*) Отключите фон у ячеек таблицы. Добавьте фоновое изображение для таблицы.

6) На основе данных о популярности браузеров за 2010 год создайте столбчатую диаграмму (гистограмму). Пример показан на рис. 11.

Указание: используйте элементы DIV заданной ширины

Рисунок 11

7) С помощью псевдокласса first-letter создайте свой вариант буквицы. Подберите шрифт, размер, цвет и оформление

8) Добавьте эффект выделения ссылок при наведении курсора на своем сайте,

9) С помощью таблицы реализуйте меню, как показано на рис. 12. Используя псевдокласс hover для строки таблицы, добавьте выделение пункта меню цветом при наведении курсора.

Рисунок 12

10) Используя плавающий блок, создайте буквицу, смещенную на одну строку вниз, как показано на рис. 13.

Рисунок 13.

11) С помощью относительного позиционирования каждой буквы создайте «эффект морской волны».

Рисунок 14.

12*) Посредством абсолютного позиционирования изобразите точечный гра­фик математической функции. Пример для у=х2 показан на рис. 15. Указание: Создайте изображение с нарисованными на нем осями X и Y. Поверх него поместите точки графика абсолютным позиционированием.

Рисунок 15

Контрольные вопросы:

1. Как можно выполнить дизайн таблиц?

2. Что такое псевдоклассы? И какие псевдоклассы вам известны?

3. Что такое позиционирование?

4. Какие параметры имеет атрибут Position?

5. Какое свойство необходимо использовать для управления порядком наложения элементов друг на друга?

6. Как управлять плавающими элементами?

12