Вертикальная HTML линия

HTML горизонтальная линия

Урок 8. HTML линия горизонтальная и вертикальная

Горизонтальная линия, определяемая HTML тегом

Данный урок научит вас создавать горизонтальные и вертикальные линии.

HTML горизонтальная линия и пример ее построения:

<html>
<head>
<title>Горизонтальная линия в HTML</title>
</head>
<body>
<hr align="center" width="500" size="2" color="#ff0000" />
<br />
<hr align="left" width="300" size="4" color="#ff9900" />
<br />
<hr align="right" width="400" size="3" color="#0000dd" />
</body>
</html>

Результат:







Атрибуты и значения

HTML линия может быть разной:

<html>
<head>
<title>HTML line</title>
</head>
<body>
<hr align="center" width="90%" size="50" color="#dddddd" />

Результат:


Вертикальная HTML линия и способы ее построения

Вертикальная линия в HTML отображается как сторона блока или таблицы.

Пример построения вертикальной линии:

<html>
<head>
<title>Вертикальная HTML линия</title>
</head>
<body>
<div style="height:30px; width:560px; border-left:2px solid #cc0033; background-color:#fc9; padding-left:10px">Пример вертикальной линии красного цвета слева.
</div>

Результат:

Пример вертикальной линии красного цвета слева.

В данном случае вертикальная HTML линия является стороной отформатированного блока.

Обычный блок с помощью стилевых описаний видоизменен до неузнаваемости. Хотите научиться так манипулировать элементами страницы – учите CSS, а что касается конкретно этого кода, то следует обратить внимание на стилевой атрибут border-left и его значения.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 7. HTML блоки, параграфы   HTML линия   Урок 9. Фон HTML страницы

    Сохранить в сервисы и закладки