Как правило, разделители на сайте используются для визуального отделения цитат и других смысловых блоков от основного контента страницы. Горизонтальные разделители для сайта могут быть проставлены с помощью тега hr. Выглядит горизонтальный разделитель следующим образом:
Тег hr может принимать следующие атрибуты:
- align - устанавливает выравнивание разделителя (right, center или left);
- color - задает цвет линии;
- size - определяет толщину линии;
- width - задает ширину линии;
- noshade - отменяет трехмерный эффект линии.
Применим теперь указанные атрибуты к горизонтальному разделителю:
<center>
<div class="nubex" style="background-color: #ee6206; padding: 5px; width: 500px;">
<hr align="center" color="#fff" size="1" width="480px" />
<p align="center" style="color: #fff;">Был бы двор, придворные найдутся.</p>
<hr align="center" color="#fff" size="1" width="480px" />
</div>
</center>Результат приведенного примера:
Был бы двор, придворные найдутся.
Стилизация разделителей с помощью CSS
Настроить отображение горизонтальных разделителей можно и с помощью CSS, и этот подход является более правильным. Ведь согласитесь, прописывать большой набор атрибутов при каждом добавлении линии - подход не совсем верный. Стилизацию hr CSS рассмотрим на следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Стилизуем горизонтальные разделители с помощью CSS</title>
<meta charset="utf-8">
<style>
hr {
color: #ee6206; /* Устанавливаем цвет линии */
background-color: #ee6206; /* Для кроссбраузерности (Opera и Mozilla Firefox) */
height: 3px; /* Задаем толщину */
border: none; /* Отменяем отображение границы (в браузере Firefox) */
}
</style>
</head>
<body>
<hr />
<center>
<p>Был бы двор, придворные найдутся.</p>
</center>
<hr />
</body>
</html>В конструкторе сайтов "Нубекс" есть несколько различных стилизованных разделителей, встраиваемых в контент сайта. Для получения более подробной информации читайте статью: Разделители для сайта.