Пример 3.15. Меню

Описание

Тег < blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

Синтаксис

Закрывающий тег

Обязателен.

Атрибуты

cite

Адрес, который указывает на источник цитаты.

Для этого тега доступны универсальные атрибуты и события.

Пример

<! DOCTYPE HTML>

< html>

< head>

< meta charset=" utf-8" >

< title> Тег BLOCKQUOTE < /title>

< /head>

< body>

< hr>

< blockquote>

< p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat

volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper

suscipit lobortis nisl ut aliquip ex ea commodo consequat. < /p>

< /blockquote>

< hr>

< /body>

< /html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение тега < blockquote>

Блочные элементы

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height. В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

Пример 3.15. Меню

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

" https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" https://www.w3.org/1999/xhtml" >

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Меню < /title>

< style type=" text/css" >

.menu {

width: 220px; /* Ширина меню */

padding: 5px; /* Отступы от рамки до пунктов меню */

border: 1px solid #000; /* Рамка вокруг меню */

}

.menu P { margin: 0 0 2px; }

.menu A {

padding: 2px; /* Отступ от рамки вокруг ссылки до текста */

display: block; /* Ссылка как блочный элемент */

border: 1px solid #fff; /* Маскируем рамку вокруг ссылки */

text-decoration: none; /* Убираем подчеркивание у ссылок */

}

.menu A: hover {

background: #faf3d2; /* Цвет фона под ссылкой */

color: #800000; /* Новый цвет ссылки */

border: 1px dashed #634f36 /* Рамка вокруг ссылки */

}

< /style>

< /head>

< body>

< div class=" menu" >

< p> < a href=" l.html" > Метод простых итераций < /a> < /p>

< p> < a href=" 2.html" > Метод случайных чисел < /a> < /p>

< p> < a href=" 3.html" > Метод дихотомии < /a> < /p>

< p> < a href=" 4.html" > Метод золотого сечения < /a> < /p>

< /div>

< /body>

< /html>

Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24).

Рис. 3.24. Ссылка как блочный элемент

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

Тег < div>