Разметка страниц с помощью блоков (DIV)

 

Недостатки использования таблиц:

" Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.

Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.

Отсутствие возможности с точностью до пикселов расположить элемент на экране.

Отсутствие возможности " надвинуть" один элемент на другой.

Отсутствие возможности управлять отображением элементов (при переполнении, таблица просто увеличивается в размерах).

Эти проблемы можно решить с помощью CSS и < DIV>.

 

Тэг < DIV> - служит для группирования элементов в блок. К сгруппированным элементам можно применить стили. Посмотрим на примерах, как это делается:

 

Примеры. Выделение блока бордюром:

1. Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div. Прописываем стили для этого блока. Это можно использовать с разметкой следующим образом:

< div style=" border-color: #FF00FF; border-style: dotted; " >

Содержимое этого элемента DIV будет заключено в прерывистую рамку.

< /div>

2. < div style=" border: 15px double #008000; " >

Содержимое этого элемента DIV будет заключено в сплошную рамку шириной 15 пикселов.

< /div>

3. < div style=" border-style: outset; border-color: #FF0000" >

Содержимое этого элемента DIV будет заключено в такую рамку.

< /div>

4. < div style=" border-right: 10px solid #00FF00; border-bottom: 10px solid

#00FF00" >

Содержимое этого элемента DIV будет заключено в такую рамку.

< /div>

5. < div style=" border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00" >

Содержимое этого элемента DIV будет заключено в такую рамку.

< /div>

 

Пример. Выделение блока цветом фона:

< div style=" background-color: #00FFFF" >

Содержимое этого элемента DIV будет выделено таким цветом.

< /div>

 

Пример. Позиционирование и задание размеров:

< div style=" background-color: #AAAAFF" >

Содержимое этого элемента DIV будет позиционироваться здесь.

< /div>

< div style=" float: left; width: 200; height: 200; background-color: #00FFFF" >

Содержимое этого элемента DIV будет позиционироваться здесь.

< /div> < div style=" float: right; width: 200; height: 200; background-color:

#FFFF00" >

Содержимое этого элемента DIV будет позиционироваться здесь.

< /div> < div style=" width: 200; height: 200; position: relative; left: 20;

background-color: #0FFD02" >

Содержимое этого элемента DIV будет позиционироваться здесь.

< /div>

< div style=" background-color: #FCC403" >

Содержимое этого элемента DIV будет позиционироваться здесь.

< /div>

 

Пример. Позиционирование в 2, 5 мерном измерении

Порядок наложения (перекрытия) блоков определяется атрибутом z-index.

< div style=" position: relative; width: 200; height: 200; z-index: 0;

background-color: #FFFF00" >

Блок - 1

< /div>

 

< div style=" position: relative; width: 200; height: 200; left: 100; z-index: 1;

top: -100; background-color: #00FFFF" >

Блок - 2

< /div>

 

< div style=" position: relative; left: 220; top: -400; width: 200; height: 200;

z-index: 2; background-color: #00FF00" >

Блок - 3

< /div>

 

< div style=" position: relative; width: 750; height: 20; z-index: 1; top: -580;

background-color: #FE76AF" >

Блок - 4

< /div>

 

< div style=" position: relative; top: -600; z-index: 3; left: 100" >

Почти 3D

< /div>

 

Примеры. Управление переполнением и видимостью.

При переполнении следующего блока:

< div style=" width: 200; height: 200; background-color: #00FFFF" >

< /div>

блок будет увеличиваться (т.е. также как и таблица).

 

При переполнении следующего блока:

< div style=" overflow: auto; width: 200; height: 200; background-color: #00FFFF" >

< /div>

блок не будет увеличиваться, информацию можно просмотреть с помощью прокрутки

 

При переполнении следующего блока:

< div style=" overflow: hidden; width: 200; height: 200; background-color:

#00FFFF" >

< /div>

блок не будет увеличиваться, информация, не поместившаяся в блок, не будет

отображена

⇐ Предыдущая123456Следующая ⇒

Поделиться: