Плавающие элементы

 

По умолчанию блочные элементы идут строго друг под другом. Изменить этот порядок можно сделав элементы «плавающими». Для этого служит CSS атрибут float. Он задает, по какой стороне будет выравниваться элемент: левой (left) или правой (right). Плавающий элемент будет стремиться к левой или правой стороне родитель­ского элемента, а с других сторон он может обтекаться текстом или другими элементами.

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

<html>

<head>

<title>Плавающие элементы</title>

<style>

DIV#main {

border: double black 3px;

width: 150px;

padding: 5px;

}

Рисунок 6. Пример: несколько плавающих блоков

 

Первый блок выравнивается по левому краю родительского контейнера. Вто­рой блок тоже стремится к левому краю, но так как место уже занято первым блоком, второй блок становится (обтекает) справа от первого. Аналогично поступает третий блок. Четвертый блок уже не может встать справа от третьего, поэтому он помещается ниже остальных и выравнивается по левому краю. И наконец, пятый блок обтекает четвертый справа.

Можно одновременно использовать блоки с выравниванием по левому и пра­вому краю.

<div style="float: left">&larr; Haлево</div> <div style="float: right">направо &rarr;</div>

Рисунок 7. Пример: блоки с выравниванием по разным краям.

 

Еще одним свойством, связанным с плавающими элементами, является clear, Clear запрещает обтекание элемента с левой (left), правой (right) или с обеих сторон (both). По умолчанию значение - попе - обтекание раз­решено. Рассмотрим пример:

<html> <head>

<style>

DIV {

border: solid black 1px;

width: 75px;

}

DIV.floating { float: left; }

</style>

</head>

<body>

<div class="floating">Блок 1</div>

<div class="floating">Блок 2</div>

<div style="clear: both">Блок с запретом обтекания</div>

<div class="floating"><Блок 3</div>

<div class="floating">Блок 4</div>

<div class="floating">Блок 5</div>

</body>

</html>

Рисунок 8 Использование правила clear.

 

При создании сайтов плавающие элементы, свойства float и clear часто используются для создания «каркаса» страниц сайта.

 

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

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. Как управлять плавающими элементами?