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;

}

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

Резюме

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


 

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

14167. Анализ кредитоспособности и инвестиционной привлекательности на базе изучения отечественного и зарубежного опыта 163.99 KB
  Целью настоящей дипломной работы является изучение подходов к анализу кредитоспособности и инвестиционной привлекательности на базе изучения отечественного и зарубежного опыта. Важность и актуальность проблемы оценки кредитоспособности и инвестиционной привлекательности предприятия обусловили выбор темы
14168. Анализ перестраховочной деятельности страховой компании 701 KB
  Введение В процессе осуществления деятельности страховая компания подвергается риску нехватки средств для выполнения обязательств по выплатам. Страховщики используют различные способы управления этим риском. С одной стороны страховщик может повысить тарифы ужес
14169. Анализ пластиковых карт Сбербанка РФ 560 KB
  Введение Стремительное развитие научнотехнического прогресса за последние пятьдесят лет не могло не сказаться на развитии банковских технологий несмотря на консерватизм этой сферы общественной жизни. Применение компьютеров позволило не только значительно сократит...
14170. Анализ рентабельности производства и разработка путей ее повышения на предприятии на примере ЧУП Цветлит 440.5 KB
  Реферат Тема дипломной работы Анализ рентабельности производства и разработка путей ее повышения на предприятии на примере ЧУП Цветлит. Объём работы 72с. Работа содержит 4 рисунка 12 таблиц 5 диаграмм и приложения. В работе использовано 50 источников литературы. ...
14171. Анлиз и аудит дебиторской и кредиторской задолженности 772.5 KB
  Цель дипломной работы - разработать рекомендации по управлению расчетами с дебиторами и кредиторами для повышения платежеспособности предприятия
14172. Аудит и анализ бухгалтерской отчетности 620 KB
  Содержание Введение Становление рыночных отношений в России когда хозяйствующим субъектам предоставлена полная юридическая экономическая и предпринимательская самостоятельность требует адекватного развития рыночных механизмо
14173. Валеология. Некоторые аспекты истории и перспективы развития 437.5 KB
  Биологии развития – от эмбрионального развития до рождения и смерти. Генетика – законы и механизмы наследственности и изменчивости. Ксенобиология – изучение разумной жизни в космосе.
14174. Государственная поддержка малого бизнеса в Алтайском крае 2010 г 290.5 KB
  СОДЕРЖАНИЕ ВВЕДЕНИЕ Глава 1. Теоретические аспекты государственного регулирования развития малого предпринимательства 1.1 Малое предпринимательство: сущность и содержание 1.2 Основные проблемы и факторы сдерживающие развитие малого предпринимательства в Росси
14175. Дознание как форма предварительного расследования в уголовном процессе 202.88 KB
  Оглавление Введение 1. Обзор и анализ нормативноправовых актов и литературы по становлению и развитию дознания в уголовном процессе России 1.1 Историкоправовые аспекты становления и развития института дознания 1.2 Становлени