Скриншот
Источник: сеоша.рф
В этом уроке пойдет речь о создании горизонтальных и вертикальных линий состоящих из изображений, которые частенько используются при создании сайтов. Делаются эти полосы заданием стиля через CSS. Используются такие линии в основном для оформления границ страницы и для разделения статей, в частности, в формате блога. Полоса может быть сколько угодно длинной потому что состоит из растиражированного рисунка.
Вообще, для создания обычной пунктирной линии в css используют значения dashed (прерывистая линия) и dotted (пунктир), например:
border-left: 1px dashed black; или border-top: 1px dashed black;
Из изображений также можно построить пунктирные и прерывистые линии, но это нецелесообразно, поэтому будем использовать какой-нибудь интересный рисунок.
Для создания горизонтальной линии:
HTML часть
Вставьте этот участок кода в том месте страницы, где Вам нужна линия.
Код
<div class="line"></div>
CSS часть
Код
.line {
background:url(img/line1.gif) top left repeat-x; height:1px; width:500px;
}
img/line1.gif - путь к изображению отрезка линии. Ширину горизонтальной линии Вы можете регулировать, меняя значение свойства width.
Для создания вертикальной линии:
HTML часть
Вставьте этот участок кода в том месте страницы, где Вам нужна вертикальная линия.
Код
<div class="line2"></div>
CSS часть
Код
.line2{
background:url(img/line2.gif) top left repeat-y; height:500px; width:1px;
}
Высоту горизонтальной линии Вы можете регулировать, меняя значение свойства height, толщину (зависит от ширины изображения) - width.
