logo

Разделительные линии

 

Вставляем разделительные линии

 
Для разделения текста на странице сайта используется тег <hr>. Этот тег вставляется в то место, где мы хотим разделить текст. На странице будет выглядеть простой черной линией на всю ширину страницы. Если это устраивает, то это самый простой способ.

Иногда необходимо вставить линию пошире или не на всю ширину страницы. Это тоже не сложно. Надо просто добавить к тегу несколько атрибутов. Рассмотрим всё на примерах.

Для начала посмотрим, как выглядит линия после вставки тега <hr> :


Для следующих примеров нам нужны будут дополнительные атрибуты к тегу. Рассмотрим их.

width - этот атрибут определяет длину линии. Длина устанавливается в пикселях или в процентах;

size - это атрибут определяет толщину линии, устанавливается в пикселях;

align - это атрибут выравнивания линии, он может принимать несколько значений:

center - выравнивает линию по центру;

right - выравнивает линию по правому краю;

left - выравнивает линию по левому краю

noshade - этот атрибут указывает на способ закраски линии, т.е. линия будет закрашена полностью.

Теперь рассмотрим примеры линий с этими атрибутами.  Задаём параметры линии: <hr width="50%" align="right" size="0">

Линия будет выглядеть так:


Теперь зададим параметр линии не на всю ширину страницы и по центру: <hr width="80%">

Линия выглядит так:


 

Задаём параметры широкой и закрашенной линии: <hr noshade="noshade" size="15" width="80%">

Линия выглядит так:


 

Можно сделать разделитель и такой формы: <hr noshade="noshade" size="15" width="15" />


 

Теперь немного расскажу о том как вставить красивую анимированную разделительную линию. С этим тоже сложностей не будет. Разберём на примере вот такой линии:

линия1

 

Делается это очень просто. Для начала надо найти нужную картинку линии, скопировать её, загрузить себе на сайт и вставит в нужном месте как обычную картинку. Код будет выглядеть так:

<div align="center"><img src="http://mehelps.ru/wp-content/uploads/2012/06/image002.gif" alt="" width="80%" height="2" /></div>

Код состоит из:

1. <div align="center"> - расположение картинки по центру. Можно поменять на right или left;

2. Дальше идёт адрес картинки. Его Вы найдёте у себя на сайте. width="80%" - длина линии в процентах; height="2"  - толщина линии в пикселях. Меняя эти величины, меняется и вид линии.

Теперь рассмотрим, как самому создать подобную линию. Сначала найдите, или создайте сами, подходящий фон. К примеру, я выбрал такую фоновую картинку:

 

Загрузил её на сайт, в библиотеке медиафайлов скопировал код картинки и вставил в выше указанный код. Немного увеличил толщину линии. И вот что получилось:

линия1
линия

 

Здесь главное побольше фантазии. Такие полоски можно делать из любого изображения

линия
Разделительные линии обновлено: Февраль 19, 2018 автором: admin

Оставить комментарий

▲Вверх