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

Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div.

Прописываем стили для этого блока

Это можно использовать с разметкой следующим образом:

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

<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.

Блок - 1

Блок - 2

Блок - 3

Блок - 4