Оригинальные линий hr элемента с изображением
Рассмотрим оригинальные линии hr элемента, что представляет собой горизонтально правила и используется для разбивки на страницы по линии, плюс изображение для красоты. Он создает горизонтальную линию, которая заставляет кого то понять, что есть конец страницы или разрыв предложения. Также можем разработать тег hr для создания привлекательного пользовательского интерфейса. В этом уроке мы собираемся разработать различные и стимулирующие hr теги, используя изображения или картинка под форматом PNG. Он прост и удобен в использовании, когда каждый код стиля отличается от другого стиля. Если вам нужно добавить горизонтальные линии в стиле разделителя на свои сайты, то у вас есть несколько вариантов. Где можете использовать свойство рамки CSS, чтобы добавить границы, которые действуют как строки либо вверху, либо внизу элемента, эффективно создавая вашу разделительную линию. 1. Вариант: 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, чтобы настроить внешний вид этих элементов, чтобы они соответствовали тому, как вы хотите, чтобы ваш сайт выглядел. Вторая версия находится в архиве: Демонстрация: |
Поделиться в социальных сетях
Материал разместил
Комментарии: 1 | |
| |