Всплывающие блоки – “Поплавки”. css всплывающие блоки

CSS

скачать бесплатно – ” HTML на примерах, всё доступно и просто (для начинающих)”
– – –чайник, HTML ДЛЯ ЧАЙНИКОВ– – –
>> с к а ч а т ь <<

скачать бесплатно – “Как создать классный сайт!
От начала и до конца”
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Всплывающие блоки - "Поплавки".Свойство float

Float – это позиционирования блоков в одной строке. Частенько используется при разработке современных дизайнов  сайта.

Имеет значения :

left – блок будет иметь позицию слева.
right блок будет позиционироваться с правой стороны.
Расположение по умолчанию, это когда блоки располагаются друг за другом вниз.

Пример:

>> В CSS напишем:

.blok1{
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok2{
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok3{
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok4{
height: 100px;
width: 100px;
border: 2px solid blue;}

>> В HTML напишем:

<div class=”blok1″>БЛОК 1<br>LEFT</div>
<div class=”blok2″>
БЛОК 2<br>LEFT</div>
<div class=”blok3″>
БЛОК 3<br>RIGHT</div>
<div class=”blok4″>
БЛОК 4<br>RIGHT</div>

Всплывающие блоки - "Поплавки".

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

>> Теперь зададим значение FLOAT.

.blok1
{height: 100px;
width: 100px;
border: 2px solid blue;}

.blok2
{float: left;
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok3
{float: right;
height: 100px;
width: 100px;
border: 2px solid blue;}

.blok4
{float: right;
height: 100px;
width: 100px;
border: 2px solid blue;}

>> В HTML напишем:

<div class=”blok1″>БЛОК 1<br>LEFT</div>
<div class=”blok2″>
БЛОК 2<br>LEFT</div>
<div class=”blok3″>
БЛОК 3<br>RIGHT</div>
<div class=”blok4″>
БЛОК 4<br>RIGHT</div>

Всплывающие блоки - "Поплавки".

Если в HTML-документе после блоков добавить параграф <p>  с текстом, тогда текст окажется в положение между блоками.

Читайте также:  Текст в CSS. Выравнивание текста, подчёркнутый. Как задать в css цвет текста?

Пример:

Всплывающие блоки - "Поплавки".

 

>> Теперь давайте попробуем поставить блоки в низу.
Для этого существует свойство clear.

Свойство clear

Clearпозволяет ставить блоки под блоками.

Имеет значения:
left – размещает блок под левыми всплывающими блоками
right – размещает блок под правыми блоками
both размещает блок ниже всех всплывающих блоков.

Давйте создадим ещё два блока 300х300 пикселей.

>> В CSS добавим стиль:

.bigblok1{
height: 200px;
width: 200px;
border: 2px solid blue;
float: right;
clear: right;}

.bigblok2{
height: 200px;
width: 200px;
border: 2px solid blue;
float: left;
clear: left;}

>> А в HTML :
<div class=”blok1″>БЛОК 1<br>LEFT</div>
<div class=”blok2″>
БЛОК 2<br>LEFT</div>
<div class=”blok3″>
БЛОК 3<br>RIGHT</div>
<div class=”blok4″>
БЛОК 4<br>RIGHT</div>
<div class=”bigblok1″>Большой БЛОК</div>
<div class=”bigblok2″>
Большой БЛОК 2</div>

Получим вот что:

Всплывающие блоки - "Поплавки".

В самих блоках может находиться, текст, списки, картинки, ссылки и т.д.

дальше. – Свойство z-index (слои на CSS)чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий