Горизонтальные и вертикальные линии с помощью html и css
Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.
На самом деле, необходимость сделать горизонтальную линию возникает достаточно часто, например, когда нужно отделить одну часть текста от другой.
Горизонтальная и вертикальная линии с помощью css
Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:
<html> <head> <title>Вертикальная HTML линия</title> </head> <body> <div style="height:20px; width:500px; border-top:1px solid #9EC1D4; border-bottom: dotted 1px #9EC1D4; padding-left:10px"> Горизонтальная линия с помощью css. </div> </body> </html>
В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.
Вот как это будет выглядеть на странице:
Горизонтальная линия с помощью css.
У этого способа есть свои преимущества:
- Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
- Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.
К недостаткам можно отнести относительную громоздкость кода.
Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег <hr>.
Горизонтальная линия с помощью тега html <hr>
Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами <body> и </body>.
У этого тега есть следующие атрибуты:
- Width – определяет длину нашей горизонтальной линии в пикселях или процентах;
- Color – определяет цвет линии;
- Align – задает выравнивание линии по правому краю – right, по левому краю – left, по центру – center;
- Size – толщина линии в пикселях.
Вот пример html – кода:
<hr size=3px width=500px align="left">
А вот так он будет выглядеть:
Как видите, у данного способа есть свои недостатки:
- Меньше настроек для линии;
- Нельзя сделать вертикальную линию.
Теперь Вы точно знаете о том, как сделать на своем сайте вертикальные и горизонтальные линии. Задать свои вопросы Вы можете в комментариях. И не забывайте подписываться на RSS.
Сохраню, может когда придется столкнуться с линиями
Очень помогли, спасибо.
а как сделать вертикальную линию для сайт бара?
Интересный способ!
Отличный интересный, простой, но очень красивый способ! Спасибо
как сделать горизонтальную линию, чтобы края утончались и становились расплывчитыми? как то так…
Спасибо! Получилось!