Чтобы добавить на ваши веб-сайты горизонтальные линии-разделители, один из вариантов включает добавление файлов изображений этих строк в ваша страница, но для этого потребуется, чтобы ваш браузер извлекал и загружал эти файлы, что может иметь негативный эффект. на производительность сайта. Вы также можете использовать CSS граница свойство для добавления границы которые действуют как линии вверху или внизу элемента, эффективно создавая линию-разделитель.
Или - еще лучше - используйте HTML элемент для горизонтальной линейки.
Элемент горизонтального правила
Внешний вид горизонтальных линейных линий по умолчанию не идеален. Чтобы они выглядели лучше, добавьте CSS, чтобы настроить внешний вид этих элементов в соответствии с тем, как вы хотите, чтобы выглядел ваш сайт.
Базовый тег HR отображает то, как браузер хочет его отображать. Современные браузеры обычно отображают теги HR без стиля с шириной 100 процентов, высотой 2 пикселя и трехмерной рамкой черного цвета для создания линии.
Ширина и высота одинаковы во всех браузерах
Единственные стили, согласованные во всех веб-браузерах, - это ширина и стили. Они определяют размер линии. Если вы не определяете ширину и высоту, ширина по умолчанию составляет 100 процентов, а высота по умолчанию - 2 пикселя.
В этом примере ширина составляет 50 процентов от родительского элемента (обратите внимание, что нижеприведенные примеры включают встроенные стили. В производственной среде эти стили фактически будут записаны во внешней таблице стилей для упрощения управления на всех ваших страницах):
style = "width: 50%;">
И в этом примере высота 2em:
style = "height: 2em;">
Изменение границ может быть сложной задачей
В современных браузерах браузер строит линию, регулируя границу. Поэтому, если вы удалите границу с помощью свойства стиля, линия исчезнет на странице. Как видите (ну, вы ничего не увидите, так как линии будут невидимы) в этом примере:
style = "border: none;">
Регулировка размера, цвета и стиля границы делает линию по-разному и имеет одинаковый эффект во всех современных браузерах. Например, в этой демонстрации граница красная, пунктирная и шириной 1 пиксель:
style = "border: 1px пунктирная # 000;">
Создайте декоративную линию с фоновым изображением
Вместо цвета определите фоновое изображение для горизонтальной линейки, чтобы оно выглядело именно так, как вы хотите, но при этом семантически отображалось в вашей разметке. В этом примере мы использовали изображение, состоящее из трех волнистых линий. Установив его как фоновая картинка без повтора он создает разрыв в содержании, который выглядит почти так, как в книгах:
style = "высота: 20 пикселей; фон: #fff url (aa010307.gif) центр прокрутки без повтора; граница: нет; ">
Преобразование элементов управления персоналом
С помощью CSS3 вы также можете сделать свои строки более интересными. HR-элемент традиционно горизонтальный line, но с помощью свойства преобразования CSS вы можете изменить их внешний вид. Любимое преобразование в элементе HR - изменение ротации.
Поверните элемент ЧСС так, чтобы он был слегка диагональным:
hr {
-moz-transform: повернуть (10deg);
-webkit-transform: повернуть (10deg);
-o-преобразование: повернуть (10deg);
-ms-transform: повернуть (10deg);
преобразовать: повернуть (10deg);
}
Или вы можете повернуть его так, чтобы он был полностью вертикальным:
hr {
-moz-transform: повернуть (90 градусов);
-webkit-transform: повернуть (90 градусов);
-о-преобразование: повернуть (90 градусов);
-ms-transform: повернуть (90 градусов);
преобразовать: повернуть (90 градусов);
}
Этот метод вращает HR в зависимости от его текущего местоположения в документе, поэтому вам может потребоваться отрегулировать позиционирование, чтобы получить его там, где вы хотите. Не рекомендуется использовать это для добавления вертикальных линий в дизайн, но это интересный эффект.
Еще один способ разместить строки на ваших страницах
Одна вещь, которую некоторые люди делают вместо использования элемента HR, - это полагаться на границы других элементов. Но иногда HR намного удобнее и проще в использовании, чем пытаться установить границы. Проблемы с блочной моделью некоторых браузеров могут еще больше усложнить настройку рамки.