Вставляємо розділові лінії
Для поділу тексту на сторінці сайту використовується тег
. Цей тег вставляється в те місце, де ми хочемо розділити текст. На сторінці буде виглядати простий чорною лінією на всю ширину сторінки. Якщо це влаштовує, то це найпростіший спосіб.
Іноді необхідно вставити лінію ширше або не на всю ширину сторінки. Це теж не складно. Треба просто додати до тегу кілька атрибутів. Розглянемо все на прикладах.
Для початку подивимося, як виглядає лінія після вставки тега
:
Для наступних прикладів нам потрібні будуть додаткові атрибути до тегу. Розглянемо їх.
width - цей атрибут визначає довжину лінії. Довжина встановлюється в пікселях або у відсотках;
size - це атрибут визначає товщину лінії, встановлюється в пікселях;
align - це атрибут вирівнювання лінії, він може приймати кілька значень:
center - вирівнює лінію по центру;
right - вирівнює лінію по правому краю;
left - вирівнює лінію по лівому краю
noshade - цей атрибут вказує на спосіб зафарбовування лінії, тобто лінія буде зафарбована повністю.
Тепер розглянемо приклади ліній з цими атрибутами. Задаємо параметри лінії:
Лінія буде виглядати так:
Тепер задамо параметр лінії не на всю ширину сторінки і по центру:
Лінія виглядає так:
Задаємо параметри широкої і зафарбованою лінії:
Лінія виглядає так:
Можна зробити роздільник і такої форми:
Тепер трохи розповім про те як вставити красиву анімовану розділову лінію. З цим теж труднощів не буде. Розберемо на прикладі ось такої лінії:
Робиться це дуже просто. Для початку треба знайти потрібну картинку лінії, скопіювати її, завантажити собі на сайт і вставить в потрібному місці як звичайну картинку. Код буде виглядати так:
1.
Тепер розглянемо, як самому створити подібну лінію. Спочатку знайдіть, або створіть самі, відповідний фон. Наприклад, я вибрав таку фонову картинку:
Завантажив її на сайт, в бібліотеці медіафайлів скопіював код картинки і вставив в вище зазначений код. Трохи збільшив товщину лінії. І ось що вийшло:
Тут головне побільше фантазії. Такі смужки можна робити з будь-якого зображення