Урок 16. Как вставить горизонтальную линию на HTML странице.
Автор: Андрей Краснокутский
Дата: 2009-07-23 С помощью тега hr (Horisontal Rule) на web-страницу можно вставить горизонтальную разделительную линию. Например вот так:
Листинг 16.1.
<HR WIDTH="50%" ALIGN="center" SIZE="1">
|
|
Вот что мы указали в коде листинга: Линия размером 50 процентов от общей ширины, с выравниванием по центру и толщиной в один пиксель.
Тега hr может иметь следующие атрибуты:
WIDTH |
Определяет длину линии в пикселях или процентах от ширины окна Обозревателя. |
SIZE |
Определяет толщину линии в пикселях. |
ALIGN |
Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:
left - выравнивание по левому краю документа.
right - выравнивание по правому краю документа.
center - выравнивание по центру документа (используется по умолчанию). |
NOSHADE |
Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной. |
COLOR |
Определяет цвет линии. УвереннорРаботает только в Internet Explorer, в других браузерах могут быть искажения. |
Несколько примеров линий:
<HR> (Обычная линия)
Листинг 16.2.
<HR WIDTH="50%" ALIGN="left" SIZE="0">
|
|
Линия размером 50 процентов с выравниванием по левому краю и с нулевой толщиной.
Листинг 16.3.
<HR WIDTH="80%" ALIGN="center" SIZE="3">
|
|
Линия размером 80 процентов, выравнивание по центру и толщиной 3 пикселя:
Листинг 16.4.
<HR NOSHADE WIDTH="80% СOLOR="Blue" SIZE="8">
| |
Линия размером 80 процентов с толщиной 8 пикселей. Кроме этого линия закрашена синим цветом, выравгивание по центру - по умолчанию:
Вместо линии можно реализовать и квадрат:
Листинг 16.5.
<HR NOSHADE WIDTH="18" СOLOR="Red" SIZE="18">
| |
Длина и толщина линии одинакова, за счет этого и рисуется квадрат. Он выполнен с выравниванием по центру и имеет красный цвет:
Расположить несколько квадратов в одну строку, к сожалению, нельзя.
Просмотров: 33427
Спасибо! Все так наглядно и доступно, что чувствуешь себя не очень умным человеком - это даже слишком просто :))
а как вставить картинку? чтобы был не просто горизонтальный разделитель, а картинка в виде гориз.разделит.??
Классно! Спасибо автору за простые и понятные примеры!
Пожалуй, можно разместить несколько квадратов в одну линию, но при этом надо применить таблицу. Создаётся строка, а в каждой колонке поместить по квадрату. Это, правда, только предположение. Но попробовать можно.
|