Урок 14: Плавающие блоки(свойство float)

С помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц.

Итак, Плавающие блоки в CSS определяются свойством float.

Свойства FLOAT

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения:

left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.

right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.

none - блок не перемещается (значение по умолчанию).

Ну вот например, как будут располагаться по умолчанию,три квадратных блока, со стороной в 200 пикселей.

html код :

<div class="box1">Первый блок</div>

<div class="box2">Второй блок</div>

<div class="box3">Третий блок</div>

CSS код :

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange}

.box3 {width:200px; height:200px; border:1px solid red; background-color:orange}

По умолчанию каждый следующий блок, находится под предыдущим.

Используя свойство float можно сделать так, чтобы каждый блок всплывал влево (в верхний левый угол):

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box3 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

Вот как будет выглядеть, если блоки будут всплывать вправо (в правый верхний угол):

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:right}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:right}

.box3 {width:200px; height:200px; border:1px solid red; background-color:orange; float:right}

Классический пример применения - это когда надо сделать чтобы текст выводился в колонках (как в газете). Пусть колонки будет три.

CSS код:

.column1 {float:left; width: 33%}

.column2 {float:left; width: 33%}

.column3 {float:left; width: 33%}

В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV:

<p>There is one universal truth in website making: To make a websitet...</p>

</div>

<p> If you're like the vast majority of people thinking ...</p>

</div>

<p>There is one universal truth in website...</p>

</div>

Свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.

left - блок должен размещаться ниже всех левосторонних плавающих блоков.

right - блок должен размещаться ниже всех правосторонних плавающих блоков.

both - блок должен размещаться ниже всех плавающих блоков.

none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.

Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.

html-код

<div class="box1">Первый блок</div>

<div class="box2">Второй блок</div>

<p>There is one universal truth in website...</p>

</div>

CSS-часть

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box3 {clear:both}

В блоках может находится что угодно(картинки, списки,текст и др.)

Урок 15: Слои в CSS

Любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным.

За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.

Например, можно сделать из карт знаменитую комбинацию Royal Flash.

Каждая карта, немного перекрывает другую. Вот как это выглядит в коде:

.desatka_buba {position: absolute; left: 200px; top: 200px; z-index: 1}

.valet_buba {position: absolute; left: 215px; top: 215px; z-index: 2}

.dama_buba {position: absolute; left: 230px; top: 230px; z-index: 3}

.korol_buba {position: absolute; left: 245px; top: 245px; z-index: 4}

.tuz_bubna {position: absolute; left: 260px; top: 260px; z-index: 5}

В html коде , просто присваиваете рисункам соответствующие стили, типа:

<img src="10buba.gif" class="10_buba"> и так далее.

Если хорошенько разобраться с этим простым методом, можно создавать довольно приличные вещи. Например размещать текст над изображением, или наоборот, создавать красивые заголовки , например с эффектом тени, также если поглубже изучить слои, можно создавать выпадающие меню , и многое другое...

⇐ Предыдущая 1 2 3 4 56