12792

Всплывающие элементы (поплавки)

Практическая работа

Информатика, кибернетика и программирование

Всплывающие элементы поплавки Элемент может всплывать вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа или содержащего бокса см. в лабораторной №7 описание боксовой модели. Принципы показаны на ...

Русский

2013-05-03

39.32 KB

1 чел.

Всплывающие элементы (поплавки)

Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса) (см. в лабораторной №7 описание боксовой модели). Принципы показаны на рисунке:

Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:

Как это сделать?

HTML-код для этого примера:

<div id="picture">

<img src="bill.jpg" alt="Bill Gates">

</div>

<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:

#picture {

float:left;

width: 100px;

}

  •  Показать пример

 Задание: сделайте так, чтобы графическое изображение (в данном случае Билл Гейтс) находилось справа и соответственно текст “обтекал” его слева.

Ещё пример: колонки

Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:

<div id="column1">

<p>Haec disserens qua de re agatur

et in quo causa consistat non videt...</p>

</div>

<div id="column2">

<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

</div>

<div id="column3">

<p>nam nihil esset in nostra

potestate si res ita se haberet...</p>

</div>

Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве float:

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

  •  Показать пример 

float может иметь значения left, right или none.

Свойство clear

Свойство clear управляет поведением последовательностью всплывающих элементов документа.

По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения Била Гейтса.

Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.

<div id="picture">

<img src="bill.jpg" alt="Bill Gates">

</div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>

Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:

#picture {

float:left;

width: 100px;

}

.floatstop {

clear:both;

}

Задание: рассмотренный выше пример сделайте самостоятельно.

Резюме

Поплавки можно использовать в разных ситуациях, часто - одновременно с позиционированием. На следующей лабораторной разберём, как позиционировать бокс, относительно или абсолютно.


 

А также другие работы, которые могут Вас заинтересовать

18312. Математика. Практикум. Ч 1 3.21 MB
  Коберник Г.І. Чирва Г.М. Математика. Практикум. Ч 1. – Умань: РВЦ Софія 2009. – 185 с. Навчальний посібник написаний згідно навчальної програми курсу €œМатематика€ для педагогічних вузів спеціальності €œПочаткова освіта€. Посібник містить навчальну програму з цього
18313. Математика. Практикум. Ч ІІ 1.3 MB
  Коберник Г.І. Чирва Г.М. Математика. Практикум. Ч ІІ. – Умань: РВЦ Софія 2009. – 185 с. Навчальний посібник написаний згідно навчальної програми курсу €œМатематика€ для педагогічних вузів спеціальності €œПочаткова освіта€. Посібник містить навчальну програму з цьог
18314. ЕКОНОМІЧНИЙ КОНТРОЛЬ У ПРАВООХОРОННІЙ ДІЯЛЬНОСТІ УКРАЇНИ 338.5 KB
  ТЕМА 1. ЕКОНОМІЧНИЙ КОНТРОЛЬ У ПРАВООХОРОННІЙ ДІЯЛЬНОСТІ УКРАЇНИ ПЛАН 1.1. Поняття економічного контролю його сутність об’єктивність та основні принципи. 1.2. Роль правоохоронних органів під час здійснення економічного контролю. 1.3. Державна податкова служба як ор
18315. СУДОВО-БУХГАЛТЕРСЬКА ЕКСПЕРТИЗА, ЇЇ ВИДИ ТА ЗАВДАННЯ 239 KB
  ТЕМА 2. СУДОВОБУХГАЛТЕРСЬКА ЕКСПЕРТИЗАЇЇ ВИДИ ТА ЗАВДАННЯ ПЛАН 2.1. Поняття про судові експертизи та їх зв’язок з правоохоронною діяльністю. 2.2. Види судових експертиз їх класифікація. 2.3. Сутність судовобухгалтерської експертизи та її зв’язок із практикою бухгал
18316. ПРЕДМЕТ І МЕТОД СУДОВО-БУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ 221.5 KB
  ТЕМА 3. ПРЕДМЕТ І МЕТОДСУДОВОБУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ ПЛАН 3.1. Предмет і об’єкти судовобухгалтерської експертизи. 3.2. Методи методичні прийоми і процедури судовобухгалтерської експертизи. Самостійне вивчення теми передбачає засвоєння о
18317. ОРГАНІЗАЦІЯ СУДОВО-БУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ 346.5 KB
  ТЕМА 4. ОРГАНІЗАЦІЯ СУДОВОБУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ ПЛАН 4.1. Загальна організація судовобухгалтерської експертизи в Україні. 4.2. Процес судовобухгалтерської експертизи та його стадії. 4.3. Порядок атестації судових експертів та основні кваліфікаційні вимоги до
18318. ОРГАНІЗАЦІЙНА СТАДІЯ СУДОВО-БУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ 311 KB
  ТЕМА 5. ОРГАНІЗАЦІЙНА СТАДІЯ СУДОВОБУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ ПЛАН 5.1. Порядок призначення судовобухгалтерської експертизи. 5.2. Зміст та структура постанови ухвали про призначення судовобухгалтерської експертизи. 5.3. Проведення судовобухгалтерської експерти
18319. МЕТОДИКА ДОСЛІДЖЕННЯ СУДОВО-БУХГАЛТЕРСЬКОЮ ЕКСПЕРТИЗОЮ ОСНОВНИХ ФІНАНСОВО-ГОСПОДАРСЬКИХ ОПЕРАЦІЙ 628 KB
  ТЕМА 6. МЕТОДИКА ДОСЛІДЖЕННЯСУДОВОБУХГАЛТЕРСЬКОЮ ЕКСПЕРТИЗОЮ ОСНОВНИХ ФІНАНСОВОГОСПОДАРСЬКИХ ОПЕРАЦІЙ ПЛАН 6.1. Методика експертного дослідження стану та операцій із грошовими коштами в касі. 6.2. Методика експертного дослідження операцій на рахунках у банку. 6.3. ...
18320. ЗАВЕРШАЛЬНА СТАДІЯ СУДОВО-БУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ 270 KB
  ТЕМА 7. ЗАВЕРШАЛЬНА СТАДІЯ СУДОВОБУХГАЛТЕРСЬКОЇ ЕКСПЕРТИЗИ ПЛАН 7.1. Висновок експертабухгалтера структура та методика його складання. 7.2. Особливості складання висновку експертизи що виконується під час судового розгляду та повідомлення про неможливість дати ви...