Среда, 26 Декабря 2012 10:58

Рисуем горизонтальную линию

Written by 
Оцени эту запись
(3 Голоса)

В данной статье рассмотрим несколько способов рисования горизонтальной линии или, так называемого, сепаратора.

 

Горизонтальные линии (сепараторы) используются для зрительного разделения контента в списке статей/материалов на сайте или для разделения разных частей статьи.

 

Пример:

 

 

Здесь идет перечень заголовков последних новостей, разделенных горизонтальными линиями. Данных эффект можно сделать задав каждому блоку с заголовком новости нижнюю границу border или фоновую картинку, расположенную внизу блока с repeat-x. А можно сделать отдельный элемент в виде горизонтальной линии, чтобы использовать его в любом месте на сайте. Именно этот вариант мы и рассмотрим.

 

Итак, первый вариант создания сепаратора - это использование тега <hr> (или <hr />).

 

Тег <hr>

 

Тег <hr> - это блочный элемент, который задает горизонтальную линию. У него есть несколько артибутов:

 

  • align - выравнивание линии
  • color - цвет линии
  • size - толщина
  • width - ширина

 

Посмотрим пару примеров:

 

<hr align="left" width="50%" color="violet" size="3">

 

 


 

<hr align="right" width="500" color="blue" size="2">

 

 


 

Это простой вариант, но не достаточно универсальный. Второй вариант создания сепаратора - использование тега <div>. В данном случае, вы можете сделать разделитель в виде точечной или пунктирной линии или вообще задать ему интересную фоновую картинку.

 

Сепаратор в виде <div>

 

<div style="width: 50%; height: 2px; background: violet;">&nbsp;</div>

 

 

 

 

 

<div style="width: 100%; height: 0; border-bottom: 1px dotted violet;">&nbsp;</div>

<div style="width: 100%; height: 0; border-bottom: 1px dashed violet;">&nbsp;</div>

 

 

 

 

 

 

 

Это уже смотрится интереснее. Попробуем задать фоновую картинку:

 
 
<div style="width: 100%; height: 4px; background: url(http://kate-land.net/images/stories/img-masc.png) top left repeat; background-position: 0 6px;">&nbsp;</div>
 
 
 
 
 
 
Или же можно использовать разные границы для создания объемности:
 
 
<div style="width: 100%; height: 0; border-bottom: 1px dashed lightblue; border-top: 1px dashed blueviolet;"> &nbsp;</div>
 
 
 
 
 
 
<div style="width: 100%; height: 0; border-bottom: 1px solid #333; border-top: 1px solid #999;">&nbsp;</div>
 
 
 
 
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов