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 - всё о продвижении сайтов
Случайные публикации:
  • Конверсия трафика из социальных сетей Конверсия трафика из социальных сетей ...е буду, а спрошу уважаемых посетителей: был ли у вас положительный
  • SEO vs. SMO. Поисковые системы или социальные сети?SEO vs. SMO. Поисковые системы или социальные сети?Вначале был один вопрос: Яндекс или Google. Теперь ещё и это :) SEO -...
  • Заголовок header X-Robots-Tag (noindex, nofollow, noarchive, nosnippet, unavailable_after) в GoogleЗаголовок header X-Robots-Tag (noindex, nofollow, noarchive, nosnippet, unavailable_after) в GoogleДумаю, данной небольшой статьёй я опишу последний способ запрета...
  • Как отключить/включить куки в браузерах Firefox, Explorer, Opera, Chrome. Должны ли быть куки отключены?Как отключить/включить куки в браузерах Firefox, Explorer, Opera, Chrome. Должны ли быть куки отключены?Это дополнение к статье о просмотре и удалении cookies в разных браузерах....
  • Что делать, если Twitter запрещает переход по ссылке или её добавление?Что делать, если Twitter запрещает переход по ссылке или её добавление?...авленным в Твиттер ссылкам, теперь увидят такое: - поэтому
Оставьте комментарий:
Через сайт Через ВКонтакте Через Facebook
сайт web-ru.net
Я не спамлю...