Горизонтальные и вертикальные линии в HTML.


Описание тега <HR>


Горизонтальные линии формируются непарным ( закрывающего тега не нужно) тегом <HR> и могут быть довольно уникальными элементами дизайна. Оформление текста с добавлением горизонтальных HTML линий придаст странице определенную логику изложения текста, а также упростит читателю выделить блоки информации, которые нужно изучать последовательно. Тег <HR> может формировать горизонтальные линии разного цвета, толщины и длины. И сделать это довольно просто, что на примерах показано ниже.

Тег HR <hr>

Кстати можно также использовать свойства стилей блоков <table> и <div> для формирования линий при определенном расположении. Правда такой вариант не всегда может быть удобным, например окрашивание таблицы иногда не всегда себя оправдывает, но во многих вариантах возможно решение задач именно таким способом. Например внутри линии, сформированной тегом <HR> текст не вставиш. А внутри блоков - это возможно и постоянно практикуется. Так что свой вариант нужно выбирать в зависимости от требований к дизайну.

Вертикальные линии в HTML.


А вертикальные линии формируются фактически в тех же блоках <table> и <div>.
Одно только неудобство - не во всех браузерах тег <HR> работает одинаково, но тут нужно пробовать и подстраивать страницу, или пользоваться обновленными браузерами.

Формирование горизонтальных линий:


Тег <HR> вставляет на страницу горизонтальную линию и имеет следующие атрибуты:

Атрибуты тега <HR>
align Выравнивание линии справа или слева,
по умолчанию - по центру.
size Задает толщину линии в пикселах.
width Задает ширину линии в процентах или пикселах.
color Задает цвет линии.
noshade Сплошная окраска, значений не требует.

Синтаксис тега <HR>:



Примеры горизонтальных линий в HTML:














Примеры вертикальных линий в HTML:



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


кружок, сформированный при помощи тега <HR>

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

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

Вот пример горизонтальной линии красного цвета вверху.

Вот пример горизонтальной линии красного цвета снизу.

Вот пример горизонтальной и вертикальной линий.


Синтаксис примеров вертикальных и горизоньальных линий в HTML:


обратите внимание на атрибут стиля border-left(-right):4px solid #FF0000;:




И если проанализировать данные примеры, то можно сделать довольно простой вывод, что вертикальные линии лучше всего формировать при помощи блоков DIV, а проможуточные варианты линий можно делать с тегом <HR> Но все зависит от фантазии и запросов. Так что выбирайте и формируйте.

копирование со ссылкой на источник kapon.com.ua

Поделитесь ссылкой на статью...


Всего комментариев - 1.    Можете оставить свой комментарий.

АСУ ТП   2013-04-09 08:42:56   сайт автора - http://www.altersoftonline.com/

А не подскажете как сделать этот тег пунктирным?


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер