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

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

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

Плавающие элементы - раздел Полиграфия, Тема дизайн 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">&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. Как управлять плавающими элементами?

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

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

Тема дизайн 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

Хотите получать на электронную почту самые свежие новости?
Education Insider Sample
Подпишитесь на Нашу рассылку
Наша политика приватности обеспечивает 100% безопасность и анонимность Ваших E-Mail
Реклама
Соответствующий теме материал
  • Похожее
  • Популярное
  • Облако тегов
  • Здесь
  • Временно
  • Пусто
Теги