Уроки 64 - 65
Блоки. Блочная верстка
(§30. Блоки)

Содержание урока

Что такое блоки?

Пример: плавающие блоки

Вопросы и задания

Задача

Пример: плавающие блоки

Блоки можно делать «плавающими», они будут обтекаться текстом. В следующем примере мы построим плавающий блок, состоящий из рисунка и подписи к нему. Для него нужно установить обтекание текстом и прижать к левой границе страницы (рис. 4.23):

<div class="picture"> 
	<img src="dog.jpg"
		width="100" height="66"> 
	<p>Ha природе</р> 
</div>

Рис. 4.23

Здесь используется класс, а не идентификатор, потому что на странице может быть несколько иллюстраций. В стилевом файле определяются свойства самого блока (класс picture) и свойство абзаца, в котором расположена подпись (.picture р):

.picture { float:left; margin: 5px; }
.picture p { 
	margin: 0; 
	text-align: center; 
	font-family: sans-serif; 
	font-size: 80%; 
	font-weight: bold;
}

Для элементов класса picture заданы поля 5 пикселей и обтекание текстом: свойству float (от англ. float — плавать) присвоено значение left (прижать влево).

Для абзаца внутри элемента класса picture установлены некоторые свойства, с которыми мы раньше не встречались:

• text-align — выравнивание текста (left, center, right или justify);
• font-family — шрифт; здесь можно указать название шрифта (например, Helvetica) или его тип (sans-serif — шрифт без засечек; serif — шрифт с засечками; monospace — моноширинный шрифт);
• font-size — размер шрифта (можно задавать по-разному, здесь — 80% от размера шрифта «родительского» элемента, в котором находится блок);
• font-weight — насыщенность, здесь установлен жирный шрифт.

Следующая страница Вопросы и задания

Cкачать материалы урока