Мегаобучалка Главная | О нас | Обратная связь  


Размещение элементов на странице




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

Свойство float

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

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

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

Задание 11_6

 

Пример 11_6.htm:

<html>

<head>

<title>Пример11_6</title>

<link rel="stylesheet" type="text/css" href="style11_6.css" />

</head>

<body>

<h1>МГТУ — университет больших перспектив!</h1>

<div id="picture">

<img src="01-small.jpg" alt="МГТУ">

</div>

<p>

{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

<p>

{сюда вставить второй абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</body>

</html>

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

Style11_6.css:

#picture {

float:left;

width:200px;

}

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

Задание 11_7

Пример11_7.htm:

<html>

<head>

<title>Пример11_7</title>

<link rel="stylesheet" type="text/css" href="style11_7.css" />

</head>

<body>

<h1>МГТУ — университет больших перспектив!</h1>

<div id="column1">

<p>{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</div>

<div id="column2">

<p>{сюда вставить второй абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</div>

<div id="column3">

<p>{сюда вставить третий абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</div>

</body>

</html>

 

Style11_7.css:

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

 

Свойство clear

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

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

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

Задание 11_8

Пример11_8.htm:

<html>

<head>

<title>Пример11_8</title>

<link rel="stylesheet" type="text/css" href="style11_8.css" />

</head>

<body>

<div id="picture">

<img src="01-small.jpg" alt="МГТУ">

</div>

 

<h1>МГТУ — университет больших перспектив!</h1>

 

<p class="floatstop">

>{сюда вставить первый абзац текста со страницы http://www.mstu.edu.ru/abit/big_perspectives.shtml}

</p>

</body>

</html>

 

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

 

Style11_8.css:

#picture {

float:left;

width: 100px;

}

 

.floatstop {

clear:both;

}

 

Посмотрите отображение файла с другими значениями свойства clear: left, right, both или none.

 

Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт большие возможности для создания точного и интересного дизайна.




Читайте также:
Почему человек чувствует себя несчастным?: Для начала определим, что такое несчастье. Несчастьем мы будем считать психологическое состояние...
Как распознать напряжение: Говоря о мышечном напряжении, мы в первую очередь имеем в виду мускулы, прикрепленные к костям ...



©2015-2020 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (482)

Почему 1285321 студент выбрали МегаОбучалку...

Система поиска информации

Мобильная версия сайта

Удобная навигация

Нет шокирующей рекламы



(0.004 сек.)