|
|
Моя дорога в изучении 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%;
}
|
|
|
