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;

}

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

Резюме

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


 

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

74249. Программное обеспечение ЭВМ. Классификация программного обеспечения 382 KB
  Совокупность программ, процедур и правил, а также документации, связанных с функционированием системы обработки данных, составляют программное обеспечение (ПО; software). Программное и аппаратное обеспечение в ЭВМ работают в неразрывной связи и взаимодействии.
74250. ПРЕДСТЕРИЛИЗАЦИОННАЯ ОБРАБОТКА 258.5 KB
  Самостоятельная работа лабораторного занятия предусматривает знакомство студентов с инструкциями (методическими рекомендациями) по применению моюще-дезинфицирующих средств, нормативными документами, а также отработку техники манипуляций и решение ситуационных задач.
74251. СТЕРИЛИЗАЦИЯ. ПРИНЦИПЫ РАБОТЫ ЦСО 197 KB
  На данном занятии изучаются методы стерилизации, которые являются важнейшим аспектом программы профилактики ИСМП в медицинских организациях. Студенты должны четко осознавать важность стерилизационных мероприятий и овладеть знаниями и навыками, необходимыми для их осуществления.
74252. Личная гигиена тяжелобольного пациента. Утренний туалет 98.78 KB
  Личная гигиена тяжелобольного пациента. Отрабатывают навыки по уходу за волосами стрижку ногтей на руках ногах умывание пациента уход за слизистыми очищение наружного слухового прохода. Обучение пациента и его семьи элементам ухода. ОСНАЩЕНИЕ: тестовые задания 2 уровень задание для деловой игры таблица Личная гигиена пациента.
74253. УЧАСТИЕ МЕДСЕСТРЫ В ЛАБОРАТОРНЫХ МЕТОДАХ ИССЛЕДОВАНИЯ 169.51 KB
  Входной контроль знаний с эталонами ответов по теме Сбор мочи и взятие мазка из носа зева и носоглотки для лабораторных исследований. Манипуляции с алгоритмом по теме Сбор мочи и взятие мазка из носа зева и носоглотки для лабораторных исследований. Ситуационные задачи – проблемного характера сценарий деловой игры элементы деловой игры по теме Сбор мочи и взятие мазка из носа зева и носоглотки для лабораторных исследований. Итоговый контроль тестовые задания письменная работа по теме Сбор мочи и взятие...
74254. УЧАСТИЕ МЕДИЦИНСКОЙ СЕСТРЫ В ИНСТРУМЕНТАЛЬНЫХ МЕТОДАХ ИССЛЕДОВАНИЯ 100.55 KB
  Значительная роль в диагностике многих заболеваний принадлежит инструментальным методам исследования. Достоверность и точность инструментальных методов исследования зависят от того насколько правильно и тщательно медицинская сестра подготовила пациента к его проведению. ЦЕЛИ: Учебная: доказать важность и необходимость...
74256. ДЕЗИНФЕКЦИЯ. ПОДГОТОВКА И ИСПОЛЬЗОВАНИЕ ДЕЗИНФИЦИРУЮЩИХ РАСТВОРОВ 73.46 KB
  В качестве самостоятельной работы рекомендуется составить тематический кроссворд; подготовить реферативное сообщение по темам Дезинфекция: зачем она нужна Виды дезинфекции Методы дезинфекции Химическая дезинфекция. Оснащение Демонстрационный материал: таблицы Виды дезинфекции; Методы дезинфекции; журнал генеральных уборок; журнал учета работы бактерицидных облучателей...
74257. МЕДИКАМЕНТОЗНОЕ ЛЕЧЕНИЕ В СЕСТИНСКОЙ ПРАКТИКЕ: ВЫПИСКА, ХРАНЕНИЕ И ПРИМЕНЕНИЕ ЛЕКАРСТВЕННЫХ СРЕДСТВ 136.79 KB
  Студенты должны осознать важность усвоения теоретического материала и практической подготовки на занятии для дальнейшей работы с пациентами в стационаре. Оформлением журналов учета лекарственных средств; ознакомить с обучением пациента приему лекарств. Проявлять выдержку сдержанность пользоваться авторитетом у пациента.