Реферат Курсовая Конспект
Плавающие блоки(свойство float) - раздел Программирование, ОСНОВЫ CSS В Этом Уроке Я Вкратце Коснусь Такой Вещи Как Плавающие Блоки. Вообще , С Пом...
|
В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется , что очень важно разобраться как это работает!
Итак, Плавающие блоки в CSS определяются свойством float.
Свойства FLOAT
Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
Ну вот например, как будут располагаться по умолчанию ,три квадратных блока, со стороной в 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
<div class="column1">
<p>There is one universal truth in website making: To make a websitet...</p>
</div>
<div class="column2">
<p> If you're like the vast majority of people thinking ...</p>
</div>
<div class="column3">
<p>There is one universal truth in website...</p>
</div>
Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR -специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
Ну допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.
Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.
html-код
<div class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<div class="box3">
<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;
}
Заметьте, что в блоках может находится что угодно(картинки, списки,текст и др.)
Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.
html-код
<div class="box1">Первый блок</div>
<div class="box2">Второй блок</div>
<p>There is one universal truth in website...</p>
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;
clear:both;
}
В общем вариантов применения может быть много. Экспериментируйте, если хотите.
Если хотите посмотреть, как использовать плавающие блоки для создания каркаса сайта, Вам сюда .
– Конец работы –
Эта тема принадлежит разделу:
Комментарии используются чтобы пояснить ваш код и могут помочь вам когда вы будете редактировать исходный код позже Комментарии игнорируются... CSS комментарий начинается с quot quot и заканчивается quot quot... Это комментарий p text align center Это другой комментарий color black font family arial...
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Плавающие блоки(свойство float)
Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:
Твитнуть |
Новости и инфо для студентов