рефераты конспекты курсовые дипломные лекции шпоры

Раздел Полиграфия
/
Плавающие элементы

Реферат Курсовая Конспект

Выберите учебное заведение

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

Плавающие элементы - раздел Полиграфия, Тема Дизайн Web-страниц c помощью CSS По Умолчанию Блочные Элементы Идут Строго Друг Под Другом. Из...

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

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

<html>

<head>

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

<style>

DIV#main {

border: double black 3px;

width: 150px;

padding: 5px;

}

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

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

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

<div style="float: left">← Haлево</div> <div style="float: right">направо →</div>

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

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

<style>

DIV {

border: solid black 1px;

width: 75px;

}

DIV.floating { float: left; }

</style>

</head>

<body>

<div style="clear: both">Блок с запретом обтекания</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. Как управлять плавающими элементами?

Развернуть

Открыть в широком формате

– Конец работы –

Эта тема принадлежит разделу:

Тема Дизайн Web-страниц c помощью CSS

Тема Дизайн Web страниц c помощью CSS... Цель научиться использовать свойства стилей для дизайна и верстки Web страниц...

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Плавающие элементы

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

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

ГодБраузер IE Firefox Safari Opera
2010 61.43% 24.40% 4.55% 2.37% 2009 69.13% 22.67% 3.58% 2.18% 2008 77.83% 16.86% 2.65% 1.84% 2007 79.38% 14.35% 4.70% 0.50% По умолчанию содержим

Позиционирование
С помощью CSS можно точно задать положение элемента на странице. Режимом позиционирования управляет свойство position: <html> <head> <titl