Главная Новости

Горизонтальные и вертикальные линии с помощью html и css


Опубликовано: 01.09.2018

видео Горизонтальные и вертикальные линии с помощью html и css

Как сделать плавную линию (css + html)

Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.



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

Горизонтальная и вертикальная линии с помощью css

Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:


Объектно-ориентированное программирование. Класс "Вертикальные линии" и "Фигура. Урок 8 [GeekBrains]

<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, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.


Создание сайта. Горизонтальная линия (тег HR)

Вот как это будет выглядеть на странице:

Горизонтальная линия с помощью css.

У этого способа есть свои преимущества:

Большой ассортимент настроек, которые позволяют задать практически любой вид для линии; Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.

К недостаткам можно отнести относительную громоздкость кода.

Между прочим, если Вы еще не знаете что такое css и какие оно дает преимущества, то подробнее об этом можно прочитать здесь .

Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег <hr>.

Горизонтальная линия с помощью  тега html <hr>

Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами <body> и </body>.

У этого тега есть следующие атрибуты:

Width – определяет длину нашей горизонтальной линии в пикселях или процентах; Color – определяет цвет линии; Align – задает выравнивание линии по правому краю – right, по левому краю – left, по центру – center; Size – толщина линии в пикселях.

Вот пример html – кода:

<hr size=3px width=500px align="left">

А вот так он будет выглядеть:

Как видите, у данного способа есть свои недостатки:

Меньше настроек для линии; Нельзя сделать вертикальную линию.

Зато этот способ намного проще.

Теперь Вы точно знаете о том, как сделать на своем сайте вертикальные и горизонтальные линии. Задать свои вопросы Вы можете в комментариях. И не забывайте подписываться на RSS .

Горизонтальные и вертикальные линии с помощью html и css was last modified: by admin

rss