русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Свойство clear


Дата добавления: 2013-12-23; просмотров: 624; Нарушение авторских прав


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

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

Урок 12: height/высота и width/ширина

До сих пор мы особо не заботились о размерах элементов, с которыми работали. В этом уроке мы посмотрим, как легко можно определять высоту и ширину элемента.

  • width
  • height

Установка ширины [width]

Свойством width вы можете определять ширину элемента.

В примере показан бокс для ввода текста:

div.box { width: 200px; border: 1px solid black; background: orange; }

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

Установка высоты [height]

Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса. Высоту элемента можно определить свойством height. В качестве примера попытаемся создать бокс высотой 500px:

div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

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

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

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

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

 

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 может иметь значения 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; }

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



<== предыдущая лекция | следующая лекция ==>
Примеры определения рамок | Относительное позиционирование


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.001 сек.