Горизонтальная линия, определяемая HTML тегом
Данный урок научит вас создавать горизонтальные и вертикальные линии.
- Горизонтальная HTML линия определяется непарным тегом <hr />.
- HTML линия может быть не только горизонтальной, но и вертикальной.
- Вертикальная линия в 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>
|
Результат:
Атрибуты и значения
- align="" – выравнивает линию справа или слева.
- width="50%" – ширина в пикселях или процентах.
- size="" – задает толщину горизонтальной линии.
- color="#00ff00" – устанавливает цвет линии.
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 и его значения.
