Плавающие блоки в CSS







Моя дорога в изучении HTML, PHP, CSS и MySQL

Украшаем сайт


8. Плавающие блоки в CSS

Табличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами. В основу идеи положено представление сайта в виде таблицы.
Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit).
Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно. Такие блоки могут свободно перемещаться по странице. Существует много способов реализовать плавающие блоки. Благодаря так называемым плавающим блокам можно построить любой каркас сайта.

Мне понравилось именно такое расположение плавающих блоков. Содержимым может быть не текст, а, например, изображение. Возможно, где-нибудь это будет в тему и пригодится. Что здесь важно? Заливка блоков фоном и расположение их в таблице, чтобы элементы, расположенные ниже (в данном случае - абзац) тоже не стали "плавать". Текст в блоках не мой, позаимствовала в Интернете. Коды для этого случая:

HTML-код:
<table style="width: 100%; margin-left: auto; margin-right: auto;" border="0" cellspacing="0" cellpadding="0" >
<tr> <td>
<div class="block1">Табличная верстка использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами. В основу идеи положено представление сайта в виде таблицы.</div>
<div class="block2">Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit).</div>
<div class="block3">Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно. Такие блоки могут свободно перемещаться по странице. Существует много способов реализовать плавающие блоки. Благодаря так называемым плавающим блокам можно построить любой каркас сайта.</div>
</td> </tr> </table>
CSS-код:
.block1 {
width: 80%;
background: #eee;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left; }
.block2 {
width: 80%;
background: #fff;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: -10px;
left: 9%; }
.block3 {
width: 80%;
background: #cff;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: -20px;
left: 18%; }







Copyright © 2015. Хайманова Татьяна Яковлевна. Все права защищены.