Лінія розділу - тег <hr>

Біла 3D людинка проводить лінію пером
Лінія розділу - тег <hr> (або <hr /> для XHTML)

<hr> (horizontal ruler) не потребує закриваючого тега та ставиться на тому місці, де Вам потрібно намалювати лінію розділу та візуально розділити функціональні модулі сторінки. Наприклад так:

Не на всіх движках передбачено використання «горизонтальної лінії» як віджету. Наприклад у JIMDO є віджет "лінія", а в Blogger немає. Тому цей тег, без сумніву, буде корисним при створенні свого веб-ресурсу.

Лінія розділу функціональних модулів контенту використовується у дизайні будь-якого веб-ресурсу. За замовчуванням лінія <hr> відображається світло-сірого кольору з ефектом об'єму. Довжина лінії - вся ширина сторінкового контенту (без сайд-барів).

Якщо такий вигляд лінії не підходить до дизайну сайту, можна змінити його через атрибути тегу. Це допоможе змінити не тільки товщину, довжину та колір лінії, але, за необхідності, і її нахил.
  • align - визначає вирівнювання лінії.
  • color - колір лінії.
  • noshade - малює лінію без ефекту тіні.
  • size - товщина лінії.
  • width - ширина лінії.
Якщо вирівнювання лінії не визначено, але вказана ширина, то за замовченням вона розміщується по центру.

Приклади:

1. Лінія товщиною 2пікс чорного кольору

<hr color="black" size="2" />

2. Лінія товщиною 5пікс, червоного кольору, довжиною 50% від загальної ширини контенту. Розміщення - по центру

<hr color="red" size="5" width="50%" />

3. Лінія товщиною 10пікс, червоного кольору, довжиною 200пікс від загальної ширини контенту. Розміщення зліва

<hr align="left" color="red" size="10" width="200" />

4. Лінія товщиною 10пікс, червоного кольору, довжиною 200пікс від загальної ширини контенту. Розміщення праворуч.

<hr align="right" color="red" size="10" width="200" />

Також можна змінити колір і розмір лінії через стилі. Однак, бажано перевірити, як така лінія виглядатиме в різних браузерах. Код стилів досить простий.

<style>
hr {
border: none; /* Прибрати кордон (тінь) лінії */
background-color: red; /* Задати колір лінії */
height: 2px; /* Задати товщину лінії */
transform: rotate(45deg); /* Задати нахил лінії */
}
</style>


Якщо на платформі BLOGGER вам треба змінити товщину і колір розділювальних ліній тільки в одній публікації, достатньо вставити цей код стилю наприкінці вашої публікації. Стиль ліній зміниться по всій сторінці, включаючи футер сайту, але на інших сторінках матиме попередній вигляд

Якщо вам треба змінити стиль розділювальних ліній по всьому сайту, то код стилю треба вставити в HTML шаблон сайту перед кодом

]]></b:skin>

тільки без тегів <style></style>