Html вертикальное отделение как hr
Перейти к содержимому

Html вертикальное отделение как hr

  • автор:

Html вертикальное отделение как hr

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


относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис

Атрибуты

align Определяет выравнивание линии. color Цвет линии. noshade Рисует линию без трехмерных эффектов. size Толщина линии. width Ширина линии.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

    Тег HR   

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид горизонтальной линии в браузере

Статьи по теме

8. Создание горизонтальных линий

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

Пример создания горизонтальных линий с помощью тега HR

Такая линия, однако, может иметь отличия в разных браузерах.
Если нужна простая, без затей линия, проще воспользоваться тегом HR.

Пример 8.1. Создание обычных линий с помощью тега HR


Пример текста с обычными линиями

По умолчанию линия отрисовывается трехмерная, что не всегда вяжется с дизайном сайта. Поэтому, если требуется сделать сплошную линию, следует добавить параметр noshade тега HR.

Пример 8.2. Создание сплошной линий

Параметр size определяет толщину линии, а width ее длину в пикселах или процентах. Такая линия всегда размещается по центру экрана, если ее выравнивание специально не задается.

В качестве горизонтальных линий также можно использовать любое подходящее изображение, надо лишь растянуть его до нужной ширины. Ниже, в качестве рисунка, использовалась нарисованная буква Н.

Рис. 8.1. Горизонтальная линия из рисунка

Пример 8.3. Создание горизонтальных линий из рисунка

Пример линии сделанной из рисунка 100% ширины

Пример линии сделанной из рисунка фиксированной ширины 400 пикселей.

При таком растягивании рисунка в нем однозначно появляются искажения. Следовательно, чем абстрактней рисунок, тем лучше; чтобы никто ничего не понял, что на нем изображено.

Что делать, если нужна не сплошная линия, а, например, пунктирная? Для этого следует воспользоваться таблицей. Создаем таблицу состоящую из одной ячейки и вставляем в нее фоновый рисунок в виде пунктирной линии. Хитрость состоит в том, чтобы в ячейке кроме фона был еще один рисунок, иначе в браузерере Netscape мы просто ничего не увидим. В качестве такого рисунка традиционно используется прозрачный GIF размером 1 на 1 пиксел.

Пример 8.4. Создание горизонтальных линий с помощью таблиц

Файл dot.gif заранее готовится в графическом редакторе и может представлять, например, вот такой вот рисунок

Еще один прием создания линий основан на использовании стилей. Вместо таблицы, описанной в предыдущем примере, используется тег DIV:

Сам класс dot описан в таблице стилей следующим образом:

где URL определяет имя рисунка, а width — ширину линии.

Можно в описание класса заложить еще и вертикальные отступы, что тоже очень удобно:

margin-top: 10px; margin-bottom: 10px;

Пример 8.5. Создание горизонтальных линий с помощью стилей

Для создания линии с помощью стилей можно также воспользоваться параметром border-bottom. Возможные виды линий показаны на рис. 3.6.

Пример 8.6. Создание горизонтальных линий с помощью стилей

В примере создается пунктирная линия красного цвета толщиной один пиксел.

Кухня HTML-верстальщика © Copyright 2008г.

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь

Как сделать вертикальную линию в css

Для формирования вертикальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.

 class="create-line">
.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr. Только изменим его с помощью стилей: сделаем ширину 1px и выставим необходимую длину линии.

hr  width: 1px; height: 200px; > 

Вариант №3. С помощью псевдоэлементов :before и :after . Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или слевой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию слева и справа 

Теперь рассмотрим стили.

.create-line-left  padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* блок будет занимать ширину по размеру контента в нём*/ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 2px; height: 50px; /* линия смещена на 10px слева от текста*/ left: 10px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > .create-line-left:after content: " "; background: #333333; width: 2px; height: 50px; /* линия смещена на 10px справа от текста*/ right: -10px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

Вертикальная и горизонтальная черта в HTML

Вот что получится:

Но чтобы сделать вертикальную черту — тега специального не предусмотрено!
И как быть?
Очень просто, оказывается с помощью div все это легко делается:

Вот что получится (поставил 2 пикселя для наглядности и 100 пикселей высоту:

Ранее я делал на своем сайте подобное: http://kupihotter.ru/, но заработал с него всего 200 тыс. рублей чистыми, но из-за политики компании производителя в России (на самом деле кетай), стало проблематично брать их товары, и магазин загнулся. Однако верстка моя до сих пор радует глаз:

Понравился пост?

Понравилось 3 , не понравилось 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *