Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Как сделать вертикальную линию css html

Поддержи проект!!! smile

Для того, чтобы сделать вертикальную линию – нам потребуется html, потом css! Вертикальную линию без двух компонентов соорудить невозможно!

В отличим от горизонтальной вертикальной линии специального тега не существует!!.

Подробно о том как сделать вертикальную линию

  1. Создаем вертикальную линию в блоке.
  2. Сделать вертикальную линию в блоке справа.
  1. Создаем вертикальную линию в блоке.

    Как вы знаете, что существует "3 способа css" - здесь будем использовать 1 - размещение стилей прямо внутри тега, в атрибуте attribute style

    Для того, чтобы создать вертикальную линию, нам понадобится блок html? пусть это будет div

    Чтобы мы могли его увидеть - давайте напишем какой-то текст и покрасим с помощью background

    <div style="background: #f9ff00;">Здесь содержимое</div>

    Результат:

    Здесь содержимое

    Далее нам нужно (например), сделать вертикальную линию у этого блока, поэтому мы добавим ему свойство border и добавим ему "left"

    <div style="background: #f9ff00; border-left: 2px solid #010101;">Здесь содержимое</div>

    Что получили?

    Здесь содержимое

    Вообще не совсем презентабельно! Добавим отступы с помощью padding:

    <div style="background: #f9ff00; border-left: 2px solid #010101; padding: 10px 20px;">Здесь содержимое</div>

    Результат... уже немного получше!

    Здесь содержимое

    Итого - получилась вертикальная линия слева:

    Это - тот способ, которыйм я пользуюсь с начала времен!

    Для создания вертикальной линии.

    Когда требуется как-то выделить текст на странице.

    Не обязательно делать такой задний фон, это просто применено в качестве примера!

    Далее сделаем что-то повеселее!

  2. Сделать вертикальную линию в блоке справа.

    Здесь особой разницы нет, как делать вертикальную линию, справ или слева. Самое главное, чтобы это выглядело красиво и презентабельно !

    Давайте сделаем такую "вертикальную линию"

    Для этого опять возьмем тег div и добавим ему класс - "vertical_line"

    <div class="vertical_line">Здесь текст с вертикальной линией, через класс</div>

    Пропишем стили css для этого класса уже вторым способом внутри attribute style
    1). Изменим вырвиглаз задний фон на "background: #f5f5f5;"
    2). Вертикальную линию поставим справа : "border-right: 2px solid #010101;"
    3). Увеличим отступы внутри "padding: 20px 33px;"
    4). Текст поставим также справа:"text-align: right;"
    5). Добавим "font-family: cursive;"
    5). И добавим наружные отступы, чтобы наш блок не прилипал к верху и низу, используем margin : margin: 20px 0;

    Соберем все стили для вертикальной линии:

    <style>
    .vertical_line{
    background: #f5f5f5;
    border-right: 2px solid #010101;
    padding: 20px 33px;
    text-align: right;
    font-family: cursive;
    margin: 20px 0;
    }
    </style>

    Результат использования вертикальной линии в теге

    Теперь, нам можно написать несколько слов, уже в новом теге с новой вертикальной линией, которая располагается справа!

    Как мне кажется - получилось терпимо!

    Еще раз повторю, что следует разбавлять однотонный текст, каким-то фишками!

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

    Или тот же текст с вертикальной линией слева:

    Теперь, нам можно написать несколько слов, уже в новом теге с новой вертикальной линией, которая располагается справа!

    Как мне кажется - получилось терпимо!

    Еще раз повторю, что следует разбавлять однотонный текст, каким-то фишками!

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


Последняя дата редактирования : 05.02.2021 22:30
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
вертикальная линия cssкак сделать вертикальную линию в cssвертикальная линия htmlкак сделать вертикальную линию в htmlкак провести вертикальную линию в htmlкак добавить вертикальную линию в htmlвертикальная черта цсс

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.