» »

Оригинальные линий hr элемента с изображением

Оригинальные линий hr элемента с изображением

Рассмотрим оригинальные линии hr элемента, что представляет собой горизонтально правила и используется для разбивки на страницы по линии, плюс изображение для красоты. Он создает горизонтальную линию, которая заставляет кого то понять, что есть конец страницы или разрыв предложения. Также можем разработать тег hr для создания привлекательного пользовательского интерфейса.

В этом уроке мы собираемся разработать различные и стимулирующие hr теги, используя изображения или картинка под форматом PNG. Он прост и удобен в использовании, когда каждый код стиля отличается от другого стиля.

Если вам нужно добавить горизонтальные линии в стиле разделителя на свои сайты, то у вас есть несколько вариантов. Где можете использовать свойство рамки CSS, чтобы добавить границы, которые действуют как строки либо вверху, либо внизу элемента, эффективно создавая вашу разделительную линию.

1. Вариант:

Красивая hr линия

HTML

Код
<div class="zornerdsalin"></div>
<hr class="zornerdsalin">

CSS
Код
div.zornerdsalin {
  height: 71px;
  background: #fff url(http://zornet.ru/Aben/ABGDA/cartoon.png) no-repeat scroll left;
  background-size: 79px 74px;
  margin-left: -9px;
}
  hr.zornerdsalin {
  width: 87%;
  margin-top: -39px;
  border: 0;
  border-bottom: 1px dashed #9e9797;
  background: #1e3c6b;
}


Если вы когда-либо помещали элемент на страницу, вы вероятно обнаружили, что метод по умолчанию, отображаемый этими строками, не идеален. Это означает, что вам нужно обратиться к CSS, чтобы настроить внешний вид этих элементов, чтобы они соответствовали тому, как вы хотите, чтобы ваш сайт выглядел.

Линия hr для сайта

Вторая версия находится в архиве:

Демонстрация:
10.02.2018 Загрузок: 1 Просмотров: 581 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 10.02.2018 18:251
0
Есть у этого материала на форуме продолжение, где можно подобрать дизайн под свой сайт. Так что можно перейти на форум и посмотреть дополнительные горизонтальные линий.
avatar