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;

}

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

Резюме

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


 

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

78264. Рахит у детей 138 KB
  Главное значение в этиологии заболевания имеет недостаточное поступление в организм ребенка витаминов группы D а также группы B B1 B2 B6 аскорбиновой кислоты витамина солей кальция фосфора магния и других микроэлементов белка и отдельных аминокислот в периоды внутриутробного и постнатального развития. Эндогенным фоном предрасполагающим к рахиту является свойственная растущему организму высокая скорость перемоделирования и роста скелета особенно в 1ый год жизни и обусловленная этими процессами большая потребность в солях...
78265. Аномалии конституции. Спазмофилия. Гипервитаминоз D у детей 137 KB
  Наличие у ребенка определенного типа диатеза еще не означает что он обречен на ту или иную патологию к которой он предрасположен потому что именно у детей по мере созревания физиологических барьеров а также профилактических мероприятий давление наследственных факторов может ослабнуть. Аллергическое поражение кожи у детей первых 3х месяцев жизни раньше рассматривали как экссудативнокатаральный диатез. Этот диатез встречается у 50 детей первых 2х лет жизни. ткани этих детей повышенно гидрофильны и одновременно гидролабильны.
78266. Гнойно-воспалительные заболевания у детей 164 KB
  В этих случаях с момента рождения у ребенка могут выявляться такие заболевания как везикулопустулез пузырчатка внутриутробная пневмония менингит сепсис и др. Однако основным путем является инфицирование ребенка после рождения. При необильном высыпании общее состояние ребенка не нарушено аппетит сохранен температура тела нормальная и реже субфебрильная а при обильном высыпании появляются симптомы интоксикации. Пузырчатка новорожденного Она развивается чаще в первые 2 недели жизни ребенка.
78267. Острые пневмонии у детей 135 KB
  Некоторые из них в том числе острые пневмонии являются одной из причин смертности детей в раннем возрасте хотя от пневмоний дети не должны умирать. Дети в этом возрасте длительное время находятся в горизонтальном положении что приводит к застою кровообращения в задненижних отделах легких и к более легкому возникновению пневмонии. Возникновению пневмонии способствуют также другие факторы а именно: несоблюдение эпидемиологического режима то есть инфицирование ребенка; неполноценное питание и плохой уход; охлаждение или перегревание...
78268. НИВЕЛИРОВАНИЕ. ГЕОМЕТРИЧЕСКОЕ НИВЕЛИРОВАНИЕ 27.54 KB
  Одиночные ходы и системы ходов должны опираться не менее чем на два исходных пункта. Проложение замкнутых ходов опирающихся на один исходный пункт допускается лишь при особой необходимости. При приложении нивелирных ходов для определения высот пунктов аналитических сетей относительно исходной основы со средними квадратическими погрешностями...
78269. Тахеометрическая съемкаемка 9. 163.31 KB
  При производстве тахеометрической съемки используют геодезический прибор тахеометр предназначенный для измерения горизонтальных и вертикальных углов длин линий и превышений. Для выполнения тахеометрической съемки используются также тахеометры с номограммным определением превышений и горизонтальных проложений линий. Производство тахеометрической съемки Тахеометрическая съемка выполняется с пунктов съемочного обоснования их называют станциями.
78270. Состав камеральных работ 166.31 KB
  Стороны угла проектируют на лимб с использованием подвижной визирной плоскости зрительной трубы. Она образуется визирной осью трубы при её вращении вокруг горизонтальной оси. Данную плоскость поочередно совмещают со сторонами угла ВА и ВС последовательно направляя визирную ось зрительной трубы на точки А и С...
78271. Определение положения точек земной поверхности, системы координат 125.83 KB
  Определение положения точек земной поверхности системы координат Топографическое изучение земной поверхности заключается в определении положения ситуации и рельефа относительно математической поверхности Земли т. в определении пространственных координат характерных точек необходимых и достаточных для моделирования местности. Модель местности может быть представлена в виде геодезических чертежей изготовление которых называют картографированием и аналитически в виде совокупности координат характерных точек. Для построения моделей...
78272. Масштабы топографических карт планов 25.89 KB
  Масштаб карты это отношение длины отрезка на карте к его действительной длине на местности. Масштаб от немецкого мера и Stb палка отношение длины отрезка на карте плане аэро или космическом снимке к его действительной длине на местности. Именованный словесный масштаб вид масштаба словесное указание того какое расстояние на местности соответствует 1 см на карте плане снимке. Так как длины линий на местности принято измерять в метрах а на картах и планах в сантиметрах то масштабы удобно выражать в словесной форме...