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

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

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

---

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

Синтаксис

Атрибуты

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

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

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

HTML5 IE Cr Op Sa Fx

       
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. Вид горизонтальной линии в браузере

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

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

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

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

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

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

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

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

HTML :: Теги
, и

Иногда при выводе текста на экран возникает необходимость перевода текста на новую строку в строго определенном месте. Для этого в HTML применяется одиночный тег (от англ. break – перенос строки), который формирует пустой элемент разметки и переводит текст на новую строку именно в том месте, в котором он находится. При этом элемент «br» сохраняет расстояние между строками и не добавляет дополнительного вертикального отступа, как в случае с блочными элементами (см. пример №1 ). Браузеры, кстати, считают его строчным элементом.

Мягкий перенос строки и тег

В IE элемент «wbr» срабатывает только, если в стилях «CSS» , применяемых к тегам , указано свойство «display: inline-block» .

Горизонтальная линия и тег
HTML Результат htmlCodes

       
Я – первый абзац. 
Чтобы узнать, почему браузер перенес часть слова на новую строку, посмотри
те код.





  
 
Я – второй абзац. Меня отделили горизонтальной линией от первого абзаца.
   

Пример №1. Использование элементов «br», «wbr» и «hr»

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

Быстрый переход к другим страницам

• Абзац, заголовки и преформатированный текст
• Теги
  , и
• Элементы «span» и «div»
• Вернуться к оглавлению учебника

html.okpython.net Copyright © 2016-2023.

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, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь