HTML и CSS – как сделать горизонтальные и вертикальные линии.

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

Линии в CSS

Есть несколько способов, сделать линии. Один из таких способов – использование CSS. А точнее при помощи Border. Давайте рассмотрим пример.

<html>
<head>
<title>Заголовок</title>
</head>
<body>
<div style="height:40px;
width:500px;
border-top:5px solid #000000;
border-bottom:10px solid #000000;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
padding-left:50px">
Горизонтальная и вертикальная линия с помощью css.
</div>
</body>
</html>

И вот что в результате получится.

 

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

 

Линии, в CSS можно нарисовать при помощи оператора Border. Если нужен просто прямоугольник с фиксированной шириной рамки, то можно просто использовать этот оператор, и задать ему значение. Например border:5px solid #000000; будет означать, что границы блока имеют ширину равной 5 пикселям черного цвета.

Однако, если нужно задать не все границы, а только некоторые, то тогда нужно прописать, какие именно нужны границы, и какое значение будет у каждой из них. Это операторы:

  • border-top – задает значение верхней границы
  • border-bottom – задает значение нижней границы
  • border-left – задает значение левой границы
  • border-right – задает значение правой границы.

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

Создать линии можно и в самом HTML. Для этого, можно воспользоваться тегом hr.

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

Но этому тегу, можно задать и некоторые значения.

  • Width – задает значение ширины линии.
  • Color – задает цвет линии.
  • Align – задает выравнивание по левому краю, по центру, по правому краю
  • Size – задает значение толщины линии в пикселях.

С помощью тега hr, можно задать и вертикальную линию. Но в этом случае, придется опять прибегнуть к стилям.

<hr style=» margin: 5px; height: 100px; width: 1px;»>

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

Заключение.

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

Ну а если у вас есть еще вопросы, задавайте их в комментариях.

web-ru.net - всё о продвижении сайтов
Случайные публикации:
  • Как отправить запрос на пересмотр сайта в Google и что это даст?Как отправить запрос на пересмотр сайта в Google и что это даст?Как известно, у поисковых систем есть ряд правил, нарушать которы...
  • SMO продвижение сайта. Что такое SMO и SMM?SMO продвижение сайта. Что такое SMO и SMM?...- Facebook, Вконтакте. Да вообще в любых, в которых только возможно. Этот момент
  • Простейший способ тестирования объявления контекстной рекламы на своём сайтеПростейший способ тестирования объявления контекстной рекламы на своём сайте...е. 50/50). Таким образом, половине посетителей своего сайта вы покажете
  • Какой хостинг выбрать? На что обратить внимание, выбирая хостинг для сайта (мощность сервера, технологии, цены, uptime...)Какой хостинг выбрать? На что обратить внимание, выбирая хостинг для сайта (мощность сервера, технологии, цены, uptime...)...500 руб/месяц (в зависимости от тарифа), впрочем в мировом интернете цены
  • Как раскрутить сайт быстро и качественно?Как раскрутить сайт быстро и качественно?...х много). Реклама будет показываться как в результатах поиска
Оставьте комментарий:
Один отзыв
Через сайт Через ВКонтакте Через Facebook
  1. hunter:

    Азы ХТМЛ и ЦСС должен знать любой вебмастер. Полезная статья — можно использовать как шпаргалку при форматировании кода сайта!

    Ответить
сайт web-ru.net
Я не спамлю...