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-аудит сайта Teotihuacan.ru. ВидеоSEO-аудит сайта Teotihuacan.ru. ВидеоВ данной статье - проверка WordPress-сайта с типичными для этого движка ошибками....
  • Защита WordPress от взлома - изменение логина. ВидеоурокЗащита WordPress от взлома - изменение логина. Видеоурок...dmin. Если же при установке движка было задано другое Имя, то взломщику придётся
  • Регионы и тематика доноров при получении ссылокРегионы и тематика доноров при получении ссылокВ предыдущей статье я описал, наверное, все параметры, по которым следует выбират...
  • Как проверить битые ссылки на сайте и настроить плагин Broken Link Checker в WordPress. ВидеоурокКак проверить битые ссылки на сайте и настроить плагин Broken Link Checker в WordPress. Видеоурок...oken Link Checker в WordPress: Скачать это видео (25 мб) После того, как вы
  • Основы поисковой оптимизации сайта (SEO). Что такое ТИЦ Яндекса и PR Google?Основы поисковой оптимизации сайта (SEO). Что такое ТИЦ Яндекса и PR Google?...айт (даже с ворованным контентом) в выдаче просто закупив
Оставьте комментарий:
Один отзыв
Через сайт Через ВКонтакте Через Facebook
  1. hunter:

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

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